开发者问题收集

在嵌套导航器内导航时未定义 route.params?

2020-07-24
2494

我正在使用 React Native 和 React Navigation。我试图只将其中一个屏幕设为 mode="Modal ,但导航时传递的路由参数显示“未定义”,错误为 TypeError: undefined is not an object (evaluating 'route.params.title') 。这是为什么?我该如何修复?

我的尝试

const ModalScreen = () => (
  <Modals.Navigator mode="modal">
    <Modals.Screen
      name="Modal"
      component={Modal}
      options={({ route }) => ({
        title: route.params.title,
        headerTransparent: true,
        gestureResponseDistance: {
          vertical: 500,
        },
      })}
    />
  </Modals.Navigator>
);
const MainScreen = () => (
  <Items.Navigator>
    <Items.Screen
      name="Main"
      component={Main}
      options={{ headerShown: false }}
    />
    <Items.Screen name="Modal" component={ModalScreen} />
  </Items.Navigator>
);

// Navigating to Modal in another file.
<TouchableOpacity
  onPress={() =>
    navigation.navigate("Modal", {
      screen: "Modal",
      title: title,
    })
  }
>
2个回答

当您向嵌套导航器发送参数时,您必须像下面这样发送

navigation.navigate('Modal', {
        screen: 'Modal',
        params: { title: 'title' },
      })

键 params 指定它是一个参数,您可以像访问任何其他参数一样访问它。

Guruparan Giritharan
2020-07-24

它不起作用的原因是因为您的参数位于父堆栈上,而不是位于路由本身上,因为您从一个堆栈导航到另一个堆栈

react navigation 提供了一个 dangerouslyGetParent 方法来解决这个问题 react navigation docs

Walter Shub
2020-07-24