Question

我该如何修复“未定义不是一个对象（评估‘navigation.navigate’）”？

2020-09-23

6536

reactjs react-native navigation react-navigation screen

因此，这是我创建的导航容器：

<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 个按钮。因此，这是我的映射函数，我通过所有按钮进行映射：

{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>
              ))}

当我按下按钮时，我得到了未定义的不是对象（评估“navigation.navigate”）错误。我该如何修复它？

Answer 1

需要注意的是， navigation 仅在屏幕组件中定义。在您的 onPress 函数中，调用 useNavigation 钩子以访问导航。类似这样的操作应该有效：

const navigation = useNavigation();

并且您需要从 React Navigation 导入它，如下所示：

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

Answer 2

如果您处于您定义的“屏幕”之一（主页、个人资料、音乐）中，React-Navigation 库会将“navigation”属性传递给它们。因此，您应该像下面这样使用它：

props.navigation.navigate('Music');

如果这也失败了，您可以使用 react navigation Hooks 来访问导航对象，如下所示：

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