React Navigation使用

详情见React Navigation文档

createStackNavigator

  1. createStackNavigator();是一个返回包含2个属性的对象的函数:Screen和Navigator。它们都是用于配置导航器的React组件。的元素Navigator应Screen作为其子元素来定义路由的配置。

  2. Stack.Navigator 是一个需要进行路由配置的组件,因为它是其子级,并带有用于配置的其他道具并呈现我们的内容。

  3. 每个Stack.Screen组件都有一个name引用路径名称的componentprop 和一个指定要为该路由渲染的组件的prop。这些是2个必备道具。

  4. 要指定堆栈中的初始路线是什么,请提供一个initialRouteName作为导航器的道具。
    要指定特定于屏幕的选项,我们可以将options Prop 传递给Stack.Screen,对于普通选项,我们可以传递screenOptionsStack.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()} />

跳转页面传值

  1. 将参数放入对象作为navigation.navigate函数的第二个参数,将参数传递给路线:navigation.navigate('RouteName', { /* params go here */ })

  2. 获取参数:route.params

  3. 注意: 参数是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

React Navigation使用React Navigation使用 姑苏云梦 发布了18 篇原创文章 · 获赞 0 · 访问量 130 私信 关注
上一篇:navigation基本概述


下一篇:PCB阻抗如何来控制