输出：

这个完整的例子应该可以工作：

import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const Stack = createStackNavigator();

const App = ({ navigation }) => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="Verification" component={VerificationScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const VerificationScreen = ({ navigation, route }) => {
  const { phoneNumber } = route.params;
  return (
    <View>
      <Text>{phoneNumber}</Text>
    </View>
  );
};

const ForgotPasswordScreen = ({ navigation }) => {
  const [text, setText] = useState('');
  const handleInput = (event) => {
    let temp = event.nativeEvent.text;
    setText(temp);
    console.log(temp)
  };
  return (
    <View style={styles.container}>
      <TextInput
        placeholder={'Input Text'}
        value={text}
        onChange={handleInput}
        style={styles.input}
      />
      <TouchableOpacity
        onPress={() =>
          text
            ? navigation.navigate('Verification', { phoneNumber: text })
            : alert('Please Input the text')
        }>
        <View style={styles.btn}>
          <Text style={styles.text}>NEXT</Text>
        </View>
        <Text>{text}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    marginTop: 100,
  },
  btn: {
    width: 100,
    height: 50,
    backgroundColor: 'white',
    borderRadius: 10,
    border: '2px solid black',
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderRadius: 10,
    color: 'black',
    width: 300,
    padding: 10,
    border: '2px solid green',
    marginVertical: 5,
  },
  text: {
    fontWeight: 'bold',
  },
});

您可以在这里找到完整的示例：Live Demo

在react中，props是函数组件的 * first * 参数。
在上面的示例中，您试图在VerificationScreen函数组件的 * second * 参数中访问props（应该是undefined）。
此外，您尝试访问props.navigation，这将给您一个错误：
未捕获的类型错误：无法读取未定义的属性"navigation
相反，因为您已经在VerificationScreen函数组件的 * first * 参数中从props反结构化navigation，所以应该使用它来访问navigate方法。

const ForgotPasswordScreen = ({ navigation }) => {
  const [text, setText] = useState('');
  return (
    <View>
      <TextInput onChangeText={(text) => { setText(text) }}></TextInput>
      <TouchableOpacity onPress={() => { navigation.navigate('VerificationScreen', { phoneNumber: text }) }}>
         <Text>Continue</Text>
      </TouchableOpacity>
    </View>
  )


const VerificationScreen = ({ navigation }) => {
  const phoneNumber = navigation.getParams('phoneNumber');
  return (
    <View>
       <Text>{phoneNumber}</Text>
    </View>
   )
}

我强烈建议您花一些时间阅读the react docs。

在第二个屏幕中，您可以更改

const VerificationScreen = (route, navigation) => {
  const { phoneNumber } = route.params;;
  return (
    <View>
       <Text>{phoneNumber}</Text>
    </View>
  )