获取 TypeError FlatList React Navigation 5

Question

我想在用户单击平面列表的项目时导航到另一个屏幕，但一直出现相同的错误。

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

我在 snack.expo 上创建了一个项目来尝试在屏幕之间移动并且它有效。这是 link 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 钩子。

 import { useNavigation } from '@react-navigation/native';
 const navigation = useNavigation();

或

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

编辑

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

编辑 2 您的名字中有一个 space ... 删除它，因为那是用于导航的 routeName

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

其他路由确实存在同样的问题

获取 TypeError FlatList React Navigation 5

Getting TypeError FlatList React Navigation 5

react-native

react-navigation

stack-navigator