ReferenceError：未定义导航答案

【问题标题】：ReferenceError: navigation is not definedReferenceError：未定义导航
【发布时间】：2021-08-05 17:18:48
【问题描述】：

我是反应原生的新手，当我添加导航按钮时，它显示 导航未定义。我需要一些帮助。

import { Image,  Button,StyleSheet, Text, View, ScrollView, SafeAreaView, ImageBackground, } from 'react-native';
import { NavigationContainer, NavigationHelpersContext, StackNavigator, useNavigation} from '@react-navigation/native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';

import HelloWorldApp from "./scholarship.js"

const HomeScreen = () => 
{
   <Button title="sample" onPress={()=> navigation.navigate('Scholarship')}></Button>
}
const Scheme = createStackNavigator();

function myScheme({navigation})
{
    <Scheme.Navigator>
        <Scheme.Screen name="Scholarship" component={HelloWorldApp}/>
    </Scheme.Navigator>
}

export default HomeScreen;```

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

使用您的 Home 组件，例如：-

const HomeScreen = ({navigation}) => {
  ........................
  .........
  }

这应该可以解决您的问题。导航位于组件的道具中所以使用就像 navigation.navigate('') 你必须从道具中解构它。就像我在上面做的那样。

【讨论】：

【解决方案2】：

根据React Navigation documentation，你应该使用useNavigation钩子：

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

const HomeScreen = () => 
{
   const navigation = useNavigation();
   return (
      <Button title="sample" onPress={()=> navigation.navigate('Scholarship')}></Button>
   );
}

【讨论】：