获取TypeError FlatList响应导航5

Question

当用户单击平面列表中的项时，我想导航到另一个屏幕，但始终得到相同的错误。

TypeError: undefined is not an object (evaluating 'navigation.navigate')

我在snack.expo上创建了一个项目，尝试在屏幕之间移动，它可以工作。这是链接https://snack.expo.io/ad5yaIPIo

但是每当我试图在我的项目上实现时，我都会得到同样的错误。需要帮助。

AuditList.js // Child Component

const AuditList = ({navigation}) => {
  const [selectedId, setSelectedId] = useState(null);
  const ItemRender = ({item}) => {
    const backgroundColor =
      item.id === selectedId ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 1)';
    return (
      <AuditItem
        item={item}
        onPress={() => {
          setSelectedId(item.id);
          navigation.navigate('Audit Details'); // Here's the navigation to go to another screens
        }}
        style={{backgroundColor}}
      />
    );
  };
  return (
    <AuditContainer>
      <FlatList
        data={DataList}
        renderItem={ItemRender}
        keyExtractor={(item) => item.id}
        extraData={selectedId}
      />
    </AuditContainer>
  );
};

SiteAudit.js // Parent Component

const InProgress = () => {
  return <AuditList />;
};

const Completed = () => {
  return <AuditList />;
};

const SiteAudit = () => {
  return (
    <Tab.Screen name="In Progress" component={InProgress} />
    <Tab.Screen name="Completed" component={Completed} />
  )
}

StackNavigation.js // Navigate To Another Screens

const StackNavigation = ({navigation}) => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Site Audit">
        <Stack.Screen name="Site Audit" component={SiteAudit} />
        <Stack.Screen
          name="Audit Details"
          component={AuditDetails}
          options={{
            headerLeft: () => (
              <LeftNavigationButton navigationProps={navigation} />
            ),
            headerTitle: (props) => <HeaderLogo {...props} />,
            headerStyle: {
              height: 150,
              backgroundColor: '#212529',
              borderBottomLeftRadius: 10,
              borderBottomRightRadius: 10,
              shadowColor: '#212529',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.7,
              shadowRadius: 3.84,
              elevation: 5,
              alignSelf: 'center',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

编辑

Routes.js // Main Navigation

const Routes = () => {
  return (
    <NavigationContainer theme={RootTheme}>
      {user ? (
        <>
          <DrawerNavigation />
        </>
      ) : (
        <>
          <AuthStack />
        </>
      )}
    </NavigationContainer>
  )
}

我如何在我的主导航中调用AuditDetails？让我们假设我的StackNavigation.js是AuditDetails的导航

Answer 1

由于您的AuditList不是由您的导航系统直接将作为屏幕呈现为 ((InProgress组件做)). navigation对象不是自动注入的。进入组件道具

所以你要么

• 使用useNavigation钩子。

从‘@react- useNavigation /本机’导入{useNavigation}；const useNavigation=

或

• 将navigation对象传递给您的AuditList组件.

编辑

const InProgress = ({ navigation }) => {
  return <AuditList navigation={navigation} />;
};

编辑2在你的名字里有一个空格.删除它，因为这是用于导航的routeName

 <Stack.Screen
          name="Audit Details" // <-- here

同样的问题也存在于其他航线上。