找不到变量："导航"在反应本机。这是我的代码，我用了YouTube上的一些

Question

import React from "react";
import { View, Button, StyleSheet, TouchableOpacity, Text } from "react-native";

    TouchableOpacity.defaultProps = { activeOpacity: 0.8 };

//touchableOpacity makes the button

    const AppButton = ({ onPress, title }) => (
      <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')} style= 
   {styles.appButtonContainer}>
        <Text style={styles.appButtonText}>{title}</Text>
      </TouchableOpacity>
    );

   //Navigation should lead to SignInScreen

const App = ({navigation}) => {
  return (
    <View style={styles.screenContainer}>
      <AppButton title="Register" size="sm" backgroundColor="#007bff" />
    </View>
  );
};

//样式按钮和所有内容constyles=样式表。创建（{screenContainer:{flex:1，justifyContent:'flex end'，padding:16}，appButtonContainer:{elevation:8，backgroundColor:'009688'，borderRadius:10，height:60，paddingVertical:10，paddingHorizontal:12}AppButtontText:{fontSize:30，color:'fff'，fontWeight:'bold'，alignSelf:'center'，textTransform:'Upcase:}）;

export default App;

Answer 1

您似乎没有从任何地方声明或导入导航。
但是假设您使用的是反应导航，您应该使用使用导航钩子。像这样：

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

const AppButton = ({ onPress, title }) => {
    const navigation = useNavigation();

    return (
        <TouchableOpacity onPress={() => navigation.navigate('SignInScreen')} style=
            {styles.appButtonContainer}>
            <Text style={styles.appButtonText}>{title}</Text>
        </TouchableOpacity>
    );
};

当必须将道具传递给不同的组件时，这也得益于更少的混乱。

Answer 2

它还需要AppButton中的导航对象。我可以看到您将导航对象作为道具传递给应用程序。但是，我没有在AppButton中看到它。

const AppButton = ({ onPress, title,navigation }) => (

      <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen') style={styles.appButtonContainer}>
        <Text style={styles.appButtonText}>{title}</Text>
      </TouchableOpacity>

 );