Блог

Я хочу перейти к другим экранам, когда пользователь нажимает на элемент flatlist, но продолжает получать ту же ошибку.

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 в моей основной навигации? Давайте предположим, что my StackNavigation.js — это навигация для AuditDetails

Поскольку ваша AuditList навигационная система не отображается непосредственно в виде экрана (( InProgress компонент делает))… navigation объект не вводится автоматически. в ваш компонент prop

Так что вы либо

• используйте useNavigation перехват.

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

или

• передайте navigation объект вашему AuditList компоненту.

Редактировать

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

Редактировать 2
В вашем имени есть пробел… удалите его, потому что это имя маршрута, которое должно использоваться для навигации

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

Такая же проблема существует и на других маршрутах