React Native route.params 未定义

Posted 2023-02-16

【中文标题】React Native route.params 未定义

【英文标题】：React Native route.params is undefined

【发布时间】：2022-01-21 06:11:49

【问题描述】：

我一直在尝试使用 navigation.navigate('Merchant', store) 将数据从 home.js 屏幕传递到 Merchant.js 屏幕，但是当我尝试实际使用 route.params 时，我得到了未定义。

这是我的 home.js

export default function Home(  navigation ) 
...
storeData.map(store => 
    return (
     <View>
      <TouchableOpacity>
        <Text style=styles.categoryName
          onPress=() => navigation.navigate('Merchant', store)>
         store.name
        </Text>
      </TouchableOpacity>

Merchant.js

function Merchant( navigation, route ) 
    console.log(route);
...

输出：

"key": "Merchant-86K9u5ytF32VGMRcO9s2g", "name": "Merchant", "params": undefined

再次，我不知道发生了什么。我试过navigation.push()，我试过使用navigation('Merchant', name: store.name)，但我仍然没有定义。

如果您想使用我的堆栈导航粘贴更多代码，我可以。

【问题讨论】：

只是为了澄清：这不是关于 React Navigation，而不是 React Native Navigation？

reactnavigation.org/docs/params 说“通过将参数作为第二个参数放入对象中，将参数传递给路由”。您是否尝试在花括号 => store 而不是 store 之间传递 store？

可能你的store 没有定义，你能用console.log 确认一下吗？

@ElsonRamos 我也这么认为，但我最近在snack 上尝试过，它似乎有效

是的，我尝试过使用花括号，是的，商店不是未定义的。

【参考方案1】：

你试过了吗？

navigation.navigate('Merchant', store)

通过以下方式访问值：

navigation.getParam('onePropertyOfStoreHere');

【讨论】：

当我尝试它说 navigation.getParam 不是一个函数。

你在用什么，从@react-navigation/native导航？你用的是哪个版本？

我有 "@react-navigation/native": "^6.0.1"

这很奇怪，根据文档reactnavigation.org/docs/params，您所做的是正确的。也许如果你能创建一个可重现的零食代表你的代码将有助于我们追踪问题

【参考方案2】：

好的，所以我想出了为什么它是未定义的。这是因为我有另一个堆栈，顶部以 Merchant.js 开头。

<Stack.Navigator initialRouteName="Merchant" headerShown='false'>
    <Stack.Screen name="Merchant" component=Merchant />
    <Stack.Screen name="ProductInfo" component=ProductInfo/>
</Stack.Navigator>

当我从主屏幕移动到商家屏幕时，这一定会使应用程序感到困惑，但它进入了另一个堆栈。