undefined 不是一个对象（评估'_ref.navigation'）React-native 导航错误

Question

如何解决反应导航中的这个错误 我无法通过 passReg() 函数导航另一个屏幕，

在我的答案中查看我的完整代码

This is my error

Answer 1

这是我的代码请解决这个错误

import 'react-native-gesture-handler';
import React,{ useState } from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView , View,Image,FlatList,RefreshControl,AsyncStorage,TextInput} from 'react-native';
import { TouchableRipple,Button} from 'react-native-paper';

import { useNavigation,NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import firebase from 'firebase';
import auth from '@react-native-firebase/auth';

import Reg from './Reg';

const Stack = createStackNavigator();

function passReg({ navigation })
  {
    navigation.navigate('reg');
  }


const PhoneSignIn=()=> {
  // If null, no SMS has been sent
  const [number, setNumber] = useState(null);
  const [confirm, setConfirm] = useState(null);
  const [code, setCode] = useState('');
  const [flag, setFlag] = useState();
  // Handle the button press
  async function signInWithPhoneNumber(phoneNumber) {
    const addNum = '+91'+phoneNumber;
    try{
      const confirmation = await auth().signInWithPhoneNumber(addNum);
      setConfirm(confirmation);
      } catch (error) {
        alert(error);
      }
  }

  async function confirmCode() {

    try {
      await confirm.confirm(code);

        if (confirm.confirm(code)) {  
          AsyncStorage.setItem('mo_num',number);
          alert("Congraulation....")
          datasend();
        }
    } catch (error) {
      alert(error);
    }
  }

  async function datasend()
  {

    fetch('https://punjabfoodhub.in/app/reg.php', {
          method: 'POST',
          mode: 'no-cors',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            'phone_num': number,
          })
        }).then((response) => response.json())
        .then((json) => {

          setFlag(json.flag);

          if (flag == 'reg') { passReg()}

        }).catch((err) => { console.log(err); });
  }

  
  if (!confirm) {
    return (
    
        <>
        <Image
          source={require('../assets/cover.png')}
          style={styles.image}
        />
        <View style={{padding:18}}> 
        <TextInput
          style={styles.input}
          placeholder="+91 **********"
          onChangeText={num => setNumber(num)}
          keyboardType="numeric"
          autoCompleteType="tel"
          dataDetectorTypes="phoneNumber"

              />
          <Button icon="phone" mode="contained" style={styles.btn} onPress={() => passReg()}>
              SEND OTP
          </Button>
          </View>
        </>
    );
  }

  return (
    <>
      <Image
          source={require('../assets/cover.png')}
          style={styles.image}
        />
        <View style={{padding:18}}> 
      <TextInput
          style={styles.input}
          maxLength = {6}
          onChangeText={text => setCode(text)}
          keyboardType="numeric"
          placeholder="OTP"
      />
      <Button icon="camera" mode="contained" style={styles.btn} onPress={()=> confirmCode()}>
          Next
      </Button>
      <Button mode="text" color="gold" onPress={() => console.log('Pressed')}>
        Resend OTP ?
      </Button>
      </View>
    </>
  );
}


export default class Login extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      number:null,
      otpsend:false,
      confirm:null,
      otp:null,
   };
  }

  render(){

    return(
      <ScrollView style={{backgroundColor:'#fff'}}>
         
        <PhoneSignIn/>
             <Stack.Navigator headerMode="none">
                <Stack.Screen name="main" component={PhoneSignIn} />
                <Stack.Screen name="reg" component={Reg} />
            </Stack.Navigator>   
      </ScrollView>
      )
  }
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    backgroundColor: '#FBFCFC', //#FFFAFA
    paddingHorizontal:12,
    //marginTop: Constants.statusBarHeight,
  },

  image:{
    width:'100%',
    height:250
  },


  input:{
      borderRadius:20,
       borderWidth: 2,
       borderColor:'gold',
       paddingHorizontal:20,
       fontSize:18
,  },

  btn:{
    borderRadius:20,
    backgroundColor:'gold',
     paddingVertical:5,
     marginTop:8
  }

 
});

Answer 2

我认为这与 navigation 属性的解构有关。

在function passReg({ navigation }) 行中，可能存在应该存在但未通过的数据。当我能够找到完全相同的问题的解决方案时，我会回来查看....