如何在 React Native 中的屏幕之间传递数据答案

【问题标题】：How I can pass data between screens in React Native如何在 React Native 中的屏幕之间传递数据
【发布时间】：2020-11-10 03:01:24
【问题描述】：

我正在尝试在屏幕之间传递数据失败了

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>
  )

非常感谢！！

【问题讨论】：

你使用的是哪个版本的 react 导航？？

标签： reactjs react-native

【解决方案1】：

输出：

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


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

【讨论】：

非常感谢。这很有帮助，我用你的回答解决了我的问题^^

【解决方案2】：

在 react 中，props 是函数组件的 first 参数。

在上面的示例中，您尝试在VerificationScreen 函数组件（即undefined）的second 参数中访问props。

此外，您尝试访问props.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。

【讨论】：

【解决方案3】：

在第二个屏幕你可以改变

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

【讨论】：