[英]How to pass parameters between two screens in react native?
Please, do not hurry to close this question as duplicate.请不要急于关闭这个问题作为重复。 I have read the official documentation here and so fa I have managed to pass successfully parameters between screens.
我在这里阅读了官方文档,因此我已经成功地在屏幕之间传递了参数。 There is som problem with my current case, and the solution is not obvious for me.
我目前的案例存在一些问题,解决方案对我来说并不明显。
I have two screens.我有两个屏幕。 The first is called "Feed" and it belongs to bottom tab navigator.
第一个称为“Feed”,属于底部标签导航器。 From the "Feed" screen I want to be able to navigate to "Comments" screen which is part of stack navigator.
从“Feed”屏幕我希望能够导航到“Comments”屏幕,它是堆栈导航器的一部分。
I am able to successfully navigate between both screens, however, for some reason I am not able to pass any parameters when I navigate from "Feed" to "Comments".我能够在两个屏幕之间成功导航,但是,由于某种原因,当我从“Feed”导航到“Comments”时,我无法传递任何参数。
Part of my "Feed" screen where I press "comments" icon:我按“评论”图标的“提要”屏幕的一部分:
<TouchableOpacity
onPress={() => {
console.log("passing param id: ", id);
navigation.navigate("Comments", { id: id });
}}
>
<FontAwesome name="comment-o" size={30} color="#0047AB" />
</TouchableOpacity>
What I see on the console:我在控制台上看到的内容:
passing param id: some_id_whic_does_not_matter
I manage to successfully navigate to my "Comments" screen.我设法成功导航到我的“评论”屏幕。 Part of my "Comments" screen:
我的“评论”屏幕的一部分:
const CommentsScreen = (props) => {
console.log("Comments Screen: ");
console.log("comments: ", props);
What I see on the console for the route object:我在控制台上看到的路由对象:
route": Object {
"key": "Comments-some-key",
"name": "Comments",
"params": undefined,
}
Can you tell me what I am doing wrong?你能告诉我我做错了什么吗?
Where I am currently located on NetworkNavigator
tab, and from there I want to navigate to the Comments
screen.我目前在
NetworkNavigator
选项卡上的位置,我想从那里导航到Comments
屏幕。
I still dont see where the issue is?我仍然没有看到问题出在哪里?
I think we access params via route
I mean我认为我们通过
route
访问参数我的意思是
const CommentsScreen =({route})=>{
const {id} = route.params;
console.log(id);
...}
You can access your passed params via following您可以通过以下方式访问您传递的参数
const CommentsScreen = (props) => {
console.log("Comments Screen: ");
console.log("comments: ", props.route.params.id);
props.route.params props.route.params
It contains the object you passed in它包含您传入的对象
navigation.navigation('screenname', {
...this object...
});
you can extract the data by using the same keys.您可以使用相同的键提取数据。
Example例子
navigation.navigation('screenname', {
id: '1',
name: 'Adam',
age: 12
});
//Then you can access via
console.log("id: ", props.route.params.id);
console.log("name: ", props.route.params.name);
console.log("age: ", props.route.params.age);
I found the answer to my question here: https://reactnavigation.org/docs/5.x/nesting-navigators#passing-params-to-a-screen-in-a-nested-navigator我在这里找到了我的问题的答案: https ://reactnavigation.org/docs/5.x/nesting-navigators#passing-params-to-a-screen-in-a-nested-navigator
So in my case:所以在我的情况下:
navigation.navigate("Root Navigator", {
screen: "Comments",
params: { id: id },
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.