TypeError：undefined不是一个对象（正在评估'route.params'）

Question

我设置了一个Drawer Navigator，并带有各种屏幕。

在一个屏幕上，我有一个带有简单TouchableOpacity的FlatList，如下所示：

 <TouchableOpacity
              onPress={() =>
                navigation.navigate("ViewProject", {
                  screen: "viewProject",
                  params: { projectID: item.projectID },
                })
              }
            >
 </TouchableOpacity>

导航正常，转到viewProject屏幕，但是无论我尝试尝试route.params似乎都不存在。

  export default function viewProject({ route }) {
  const projID = route.params?.projectID ?? 0; // ERRORS with TypeError: undefined is not an object (evaluating 'route.params')
  console.log(projID); 

}

我正在使用最新的React Native，Navigation等和TypeScript。

我唯一的成功是在馈入抽屉的createStackNavigator上设置了InitialRouteParams，但是只能通过navigation.state.params进行访问：

const screens = {
  viewProject: {
    screen: viewProject,   
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: () => (
          <Header navigation={navigation} title={"View Project"} />
        ),
      };
    },
  },
};

const viewProjectStack = createStackNavigator(screens, {
  initialRouteParams: { projectID: 23 }, // This works, but it's static and I can't change it  
});

谢谢。斯图尔特

Answer 1

您可以这样通过：-

<Button
title="Go to Details"
onPress={() => {
  /* 1. Navigate to the Details route with params */
  navigation.navigate('Details', {
    itemId: 86,
    otherParam: 'anything you want here',
  });
}}

/>

并收到如下信息：-

function DetailsScreen({ route, navigation }) {
 /* 2. Get the param */
 const { itemId } = route.params;
const { otherParam } = route.params;
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>itemId: {JSON.stringify(itemId)}</Text>
 <Text>otherParam: {JSON.stringify(otherParam)}</Text>
  );
  }

source

希望有帮助！