rn 路由传参、navigation传参-蒲公英云

rn 路由传参、navigation传参

傷城~ 2021-07-24 16:57 1431阅读 0赞

路由传参:
    (1)传参数
            (1)发送
                函数式传递
                function xx({navigation})
                {
                        ...
                            //发送
                        {navigation.navigate('路由名',{键值对})}    
                  }
                 路由声明处传递
                 <Stack.Screen name="xx" component={x} initialParams={
   {键值对}}/>
            (2)接收
                1、函数式组件
                function xx({navigation,route})
                {
                        ...
                            //接收
                        {JSON.stringify(route.params.键名)}    
                  }
            2、类组件
            export default class xx extends Component{
                ...
                const {route} = this.props
                ...
                {JSON.stringify(route.params.键名)}    
            }
        其中:
            (1)接收参数最好使用JSON.stringify将参数序列化成字符串(官方推荐),能做到深度链接
            (2)可传参数{route.params?.键名}; 当参数存在时才显示,多用于下一个屏幕传递到上一个屏幕
navigation传参：
    this.props.navigation.setParams({键值对});
    this.props.navigation.getParam('键名');

代码示例:

import 'react-native-gesture-handler';
import React,{ Component} from 'react'
import { Text,View,StyleSheet,Button,ScrollView} from 'react-native'
import {  NavigationContainer } from '@react-navigation/native';
import {  createStackNavigator } from '@react-navigation/stack';
import A from './App21'
function Home({  navigation,route }){ 
    return (
        <View style={ {  flex:1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Text>{ route.params?.address}</Text>
          <Button
                title="Go to Details"
                //导航,相当于go,相当页面不会放进栈里
                onPress={ () =>navigation.navigate('Details',{ name:'jeff',pass:'123'})}
                color='red'
            ></Button>
          <Button
            title="Go to A"
            //push会将路由放进堆栈里即使是相同页面
            onPress={ () => navigation.navigate('A',{ id:'2'})}
          />
        </View>
      );
}
function DetailsScreen({ navigation,route}) { 
    return (
      <View style={ {  flex:1,alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>{ JSON.stringify(route.params.name)}</Text>
        <Text>{ JSON.stringify(route.params.pass)}</Text>
        <Text>{ JSON.stringify(route.params.sex)}</Text>
        <Button
        title="Go to Details... again"
        //push会将路由放进堆栈里即使是相同页面
        onPress={ () => navigation.push('Details')}
      />
      <Button
        title="Go Back"
        //push会将路由放进堆栈里即使是相同页面
        onPress={ () => navigation.navigate('Home',{ address:'heart'})}
      />
      </View>
    );
  }
  function New({ navigation}) { 
    return (
      <View style={ {  flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>New Screen</Text>
      </View>
    );
  }
export default class App extends Component{ 
    render(){ 
        const Stack = createStackNavigator();
        return (
            <>
                <NavigationContainer>
                    <Stack.Navigator initialRouteName="Home">
                        <Stack.Screen name="Home" component={ Home} options={ {  title: 'Overview' }}/>
                        <Stack.Screen name="Details" component={ DetailsScreen} initialParams={ { sex:'female'}}/>
                        <Stack.Screen name="New" component={ New} />
                        <Stack.Screen name="A" component={ A} />
                    </Stack.Navigator>
                </NavigationContainer>
            </>
        );
    }
  }

类组件:

import React,{ Component} from 'react'
import { View,Text,StyleSheet,Button} from 'react-native'
import FontAwesome from 'react-native-vector-icons/dist/FontAwesome'
export default class App extends Component{ 
    render(){ 
        const { navigation,route}=this.props
        return(
            <>
               <Text>哈哈哈</Text>
               <Text>{ route.params.id}</Text>
               <Button 
               title='go details'
                onPress={ ()=>navigation.navigate('Details')}
               />   
            </>
        )
    }
}