我如何在 React Native 的屏幕之间传递数据

Question

我试图在屏幕之间传递数据但失败了

undefined is not an object (evaluating 'props.navigation.getParams') 

我的代码：

第一个画面：

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

我尝试在第二个屏幕接收数据：

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

非常感谢 ！！

Answer 1

在 react 中， props是函数组件的第一个参数。

在上面的示例中，您尝试访问VerificationScreen函数组件的第二个参数中的props （将是undefined ）。

此外，您尝试访问props.navigation这会给您一个错误：

未捕获的类型错误：无法读取未定义的属性“导航”

相反，因为您已经在VerificationScreen函数组件的第一个参数中从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>
   )
}

我强烈建议您花一些时间阅读react 文档。

Answer 2

输出：

这个完整的例子应该有效：

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',
  },
});

您可以在此处找到完整的现场示例：现场演示

Answer 3

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

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