React Navigation 路由传参的操作代码
页面之间传递参数
实现页面之间传递参数很简单,跟普通的 React 项目一样,具体实例入戏:
// 传入参数
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>
);
}通过上述的例子可以看出我们实现参数的传递与获取只需要两部:
- 通过将参数放入对象中作为函数的第二个参数来将参数传递给路由
navigation.navigate('RouteName', { 参数 }) - 读取屏幕组件中的参数:
route.params
传递初始参数
您可以将一些初始参数传递给屏幕,如果您在导航到此屏幕时未指定任何参数,则将使用初始参数。它们也与您传递的任何参数浅层合并。初始化参数可以在 Stack.Screen 组件中使用 initialParams 属性来实现。具体实例如下:
<Stack.Screen
name="Detail Page"
component={ReviewDetails}
initialParams={{ itemId: 42 }}
/>参数传递给上一级路由
参数不仅对于将一些数据传递到新屏幕有用,而且对于将数据传递到前一个屏幕也很有用。具体实例如下:
// 首页(接收创建文章页面回传回来的数据)
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>
);
}通过上述的例子我们可以看到要把参数传递给上一级路由的方法跟我们普通传递参数的方法是一样的。
到此这篇关于React Navigation 路由传参的文章就介绍到这了,更多相关React 路由传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React useEffect、useLayoutEffect底层机制及区别介绍
useEffect 是 React 中的一个 Hook,允许你在函数组件中执行副作用操作,本文给大家介绍React useEffect、useLayoutEffect底层机制及区别介绍,感兴趣的朋友一起看看吧2025-04-04
react-router-dom v6版本跳转路径的实现方法
这篇文章主要介绍了react-router-dom v6版本跳转路径的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
react执行【npx create-react-app my-app】出现常见错误的解决办法
文章主要介绍了在使用npx创建React应用时可能遇到的几种常见错误及其解决方法,包括缺少依赖、网络问题和npx解析错误等,并提供了相应的解决措施,此外,还提到了使用腾讯云云产品来支持React应用开发2024-11-11


最新评论