如何解决“未定义的不是对象评估'navigation.navigate'”的问题？

如何解决如何解决“未定义的不是对象评估'navigation.navigate'”的问题？

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

<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”）错误。我该如何解决？

解决方法

请注意，navigation仅在屏幕组件中定义。 在onPress函数中，调用useNavigation挂钩可以访问导航。这样的事情应该起作用：

const navigation = useNavigation();

您需要像这样从React Navigation导入它：

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

,

如果您位于自己定义的“屏幕”之一（家庭，个人资料，音乐）中，则React-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;