未定义不是一个对象（评估'route.params.title'）

Question

我按照 React Navigation Doc 来实现动态标题标题更改，但它显示错误 Undefined is not an object (evaluating 'route.params.title')。

我的 tabs.js：

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
      <HomeStack.Screen
        name="Profile"
        component={Profile}
        options={({ route }) => ({ title: route.params.title })}
      />
    </HomeStack.Navigator>
  );
}

Home.js 有这样的 onpress：

<TouchableOpacity
  onPress={() => {
    navigation.navigate('Profile', {
      title: 'Custom title',
    });
  }}
>

和 Profile.js：

function Profile({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Hello</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

Answer 1

在您的 params 上添加一个检查/默认值，因为 route.params 并不总是有价值的，但只有当您在该页面上导航时。

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
      <HomeStack.Screen
        name="Profile"
        component={Profile}
        options={({ route }) => ({ title: route.params?.title || "DEFAULT TITLE" })}
      />
    </HomeStack.Navigator>
  );
}