Pass parameters between pages
It is very simple to transfer parameters between pages, just like ordinary React projects. Here are the specific examples:
// 传入参数
export default function Home(props: {
navigation: any }) {
return (
<View>
<Text>Home</Text>
<Button
title="切换到详情页"
onPress={
() =>
props.navigation.navigate("Detail Page", {
itemId: 86,
otherParam: "这是传递过来的参数",
})
}
/>
</View>
);
}
// 获取参数
export default function ReviewDetails(props: {
navigation: any;
route: {
params: {
itemId: number; otherParam: string } };
}) {
return (
<View>
<Text>详情页</Text>
<Text>itemId: {
props.route.params.itemId}</Text>
<Text>otherParam: {
props.route.params.otherParam}</Text>
<Button
title="切换到详情页"
onPress={
() => props.navigation.push("Detail Page")}
/>
<Button
title="返回上一页"
onPress={
() => props.navigation.goBack()}
></Button>
<Button
title="清除所有堆栈信息返回首页"
onPress={
() => props.navigation.popToTop()}
></Button>
</View>
);
}
From the above example, we can see that we only need two steps to realize the transmission and acquisition of parameters:
- Pass parameters to a route by putting them into an object as the second parameter of the function
navigation.navigate('RouteName', { 参数 }) - Read parameters in the screen component:
route.params
Pass initial parameters
You can pass some initial parameters to the screen, if you don't specify any parameters when navigating to this screen, the initial parameters will be used. They are also shallowly merged with any arguments you pass. initialParamsInitialization parameters can be implemented using properties in the Stack.Screen component . Specific examples are as follows:
<Stack.Screen
name="Detail Page"
component={
ReviewDetails}
initialParams={
{
itemId: 42 }}
/>
Parameters are passed to the upper level route
Parameters are useful not only for passing some data to a new screen, but also for passing data to the previous screen. Specific examples are as follows:
// 首页（接收创建文章页面回传回来的数据）
export default function Home(props: {
navigation: any; route: any }) {
React.useEffect(() => {
if (props.route.params?.post) {
console.log(props.route.params?.post);
}
}, [props.route.params?.post]);
return (
<View>
<Text>Home</Text>
<Text style={
{
margin: 10 }}>
添加文章页面传回的参数: {
props.route.params?.post}
</Text>
<Button
title="切换到详情页"
onPress={
() =>
props.navigation.navigate("Detail Page", {
itemId: 86,
otherParam: "这是传递过来的参数",
})
}
/>
<Button
title="添加文章"
onPress={
() => props.navigation.navigate("CreateArticle")}
></Button>
</View>
);
}
// 创建文章
export default function CreateArticle(props: {
navigation: any; route: any }) {
const [postText, setPostText] = React.useState("");
return (
<View>
<TextInput
multiline
placeholder="What's on your mind?"
style={
{
height: 200, padding: 10, backgroundColor: "white" }}
value={
postText}
onChangeText={
setPostText}
/>
<Button
title="完成"
onPress={
() => {
props.navigation.navigate({
name: "Home Page",
params: {
post: postText },
merge: true,
});
}}
/>
</View>
);
}
From the above example, we can see that the method of passing parameters to the upper-level routing is the same as our normal method of passing parameters.