React Navigation使用

2020-03-02 13:07:50 阅读：682 来源： 互联网

标签：Navigation Screen React params 使用 navigate navigation route 页面

createStackNavigator

createStackNavigator();是一个返回包含2个属性的对象的函数：Screen和Navigator。它们都是用于配置导航器的React组件。的元素Navigator应Screen作为其子元素来定义路由的配置。
Stack.Navigator 是一个需要进行路由配置的组件，因为它是其子级，并带有用于配置的其他道具并呈现我们的内容。
每个Stack.Screen组件都有一个name引用路径名称的componentprop 和一个指定要为该路由渲染的组件的prop。这些是2个必备道具。
要指定堆栈中的初始路线是什么，请提供一个initialRouteName作为导航器的道具。
要指定特定于屏幕的选项，我们可以将options Prop 传递给Stack.Screen，对于普通选项，我们可以传递screenOptions给Stack.Navigator


function HomeScreen() {
  
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};
const Stack = createStackNavigator();
 <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home"  component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>

注意:componentprop接受组件，而不是渲染函数。不要传递内联函数（例如component={() => }），否则当父组件重新渲染时，您的组件将被卸载并重新安装，从而丢失所有状态。

屏幕跳转:

在按钮中添加事件,传入想跳转的名称navigation.navigate('name')

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

注意: 当前页面跳转到当前页面,则不会跳转 ,但是要传递数据则将navigate替换成push

将导航器状态替换为新状态：

 navigation.reset({
  index: 0,
  routes: [{ name: 'Profile' }],
});

除了页面上方的返回页面,你还能为按钮添加goBack()

<Button title="Go back" onPress={() => navigation.goBack()} />

返回第一个页面

<Button title="Go back"    onPress={() => navigation.popToTop()} />

跳转页面传值

将参数放入对象作为navigation.navigate函数的第二个参数，将参数传递给路线：navigation.navigate('RouteName', { /* params go here */ })
获取参数：route.params。
注意: 参数是JSON可序列化的

  function HomeScreen({navigation} ) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
     
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
};

function DetailsScreen({route,navigation}) {
  const { itemId } = route.params;
  const { otherParam } = route.params;
       <Text>itemId:{JSON.stringify(itemId)}</Text>
       <Text>otherParam: {JSON.stringify(otherParam)}</Text>
}

可以使用 initialParams为页面添加一个初始参数

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

更改路由参数

使用setParams更改传递过来的数据

function ProfileScreen({route, navigation }) {
  render() {
    return (
      <Button
        onPress={() =>
          navigation.setParams({
            friends:
              route.params.friends[0] === 'Brent'
                ? ['Wojciech', 'Szymon', 'Jakub']
                : ['Brent', 'Satya', 'Michaś'],
            title:
              route.params.title === "Brent's Profile"
                ? "Lucy's Profile"
                : "Brent's Profile",
          })
        }
        title="Swap title and friends"
      />
    );
  }
}

useState
useState

姑苏云梦发布了18 篇原创文章 · 获赞 0 · 访问量 130 私信关注

标签：Navigation,Screen,React,params,使用,navigate,navigation,route,页面
来源： https://blog.csdn.net/weixin_45621649/article/details/104597908

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React Navigation使用

createStackNavigator

屏幕跳转:

返回

跳转页面传值

更改路由参数