Как я могу исправить "неопределенный не является объектом (оценка 'navigation.navigate')"?

#reactjs #react-native #navigation #react-navigation #screen

#reactjs #реагировать-родной #навигация #реакция-навигация #экран

Вопрос:

Итак, вот созданный мной навигационный контейнер:

 <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false
          }}
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Music" component={MusicScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>

Но мне не нужно, чтобы кнопка была уникальной на каждом экране, будет 3 кнопки, которые будут отображаться на всех экранах. Итак, вот моя функция map, в которой я отображаю все свои кнопки:

 {tabs.map(({ icon, line }, index) => (
                <View key={ index }>
                  <Tab 
                    {...{ index, transition, active }}
                    onPress={() => {
                      active.setValue(index);

                      if (index == 0) {
                        navigation.navigate('Music')
                      } else if (index == 1) {
                        navigation.navigate('Home')
                      } else if (index == 2) {
                        navigation.navigate('Profile')
                      }
                    }}
                  >
                    {icon}
                  </Tab>
                  <View style={styles.blueLineContainerBack}>
                    <LineWrapper
                      {...{activeTransition, active, line, index}}
                    />
                  </View>
                </View>
              ))}

Пока я нажимаю на кнопку, я получаю ошибку undefined не является объектом (оценка ‘navigation.navigate’). Как я могу это исправить?

1. похоже, вы хотите использовать навигацию по вкладкам вместо навигации по стеку. reactnavigation.org/docs/tab-based-navigation

2. Не совсем, потому что я уже пробовал это, и это не работает должным образом

3. Я думаю, вы можете использовать withNavigation (ComponentName) для использования реквизитов навигации в этом компоненте.

Ответ №1:

Важно отметить, что navigation это определено только в компонентах экранов. В вашей функции onPress вызовите перехват useNavigation, чтобы получить доступ к навигации. Что-то вроде этого должно работать:

 const navigation = useNavigation();

И вам нужно импортировать его из React Navigation как таковой:

import { useNavigation } from '@react-navigation/native';

Ответ №2:

Если вы находитесь на одном из «экранов», которые вы определили (Home, Profile, Music), библиотека React-Navigation передает в них «навигационный» реквизит. Поэтому вы должны использовать его, как показано ниже:

 props.navigation.navigate('Music');

Если это тоже не удается, вы можете использовать навигационные крючки react для доступа к объекту навигации следующим образом:

 import { useNavigation } from '@react-navigation/native';
const MyComponent = () => {
  const navigation = useNavigation();
  ...
  return(
    ...
    <Button title="Go to music" onPress={() => { navigation.navigate('Music'); }} />
  );
};
export default MyComponent;