React Navigation 初探 - 页面传值
我们已知如何创建堆栈导航器和页面之间的跳转,接下来我们将学习页面间如何进行传值.
页面传值只要分为两部分:
- 通过将参数作为
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={() => {
/* 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
向上一面传参数.
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
- 参数应包含显示屏幕所需的最少数据,仅此而已