React Navigation 初探 - 页面传值

React Navigation 初探 - 页面传值

我们已知如何创建堆栈导航器和页面之间的跳转,接下来我们将学习页面间如何进行传值.

页面传值只要分为两部分:

1. 通过将参数作为 navigation.navigate 函数的第二个参数放入对象中，将参数传递给路由：navigation.navigate('RouteName', { /* params go here */ })
2. 跳转页面中读取数据：route.params.

我们建议您传递的参数是 JSON 可序列化的.

在 Snack 中尝试

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

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

更新参数

当前页面允许更新它的参数,就和更新State一样,通过 navigation.setParams 方法更新参数.

navigation.setParams({
  query: 'someText',
});

设置初始参数

可以设置一些默认参数传给新页面,如果当前页面没有指定任何参数,使用初始参数.通过 initialParams 设置初始参数.

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

将参数传到上一个页面

参数不仅仅需要传到新的页面,有时也需要传递参数到前一页面.假如你有一个带有创建帖子的页面,点击按钮打开新的页面创建帖子,创建帖子后,你希望帖子数据返回上一页面.

可以通过 navigate 方法实现这一需求(像goBack一样).可以通过navigate向上一面传参数.

在 Snack 中尝试

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}

总结

• navigate 并 push 接受一个可选的第二个参数，让您将参数传递给您要导航到的路线。例如：navigation.navigate('RouteName', { paramName: 'value' })。
• 您可以通过 route.params 屏幕内部读取参数
• 您可以使用更新屏幕的参数 navigation.setParams
• 初始参数可以通过 initialParams 道具传递 Screen
• 参数应包含显示屏幕所需的最少数据，仅此而已