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

Question

I'm trying to passing data between screen and failed with

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

My code:

First screen:

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

And i'm try to receive data at second screen:

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

Thanks so much !!

Answer 1

In react, props is the first argument of a function component.

In your example above, you attempt to access props in the second argument of the VerificationScreen function component (which would be undefined ).

Furthermore, you attempt to access props.navigation which would give you an error:

Uncaught TypeError: Cannot read property 'navigation' of undefined

Instead, because you are already de-structuring navigation from props in the first argument of the VerificationScreen function component, you should use it to access the navigate method.

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

I highly recommend that you take some time to read the react docs .

Answer 2

Output:

This full example should work:

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

You can find a full live example here: Live Demo

Answer 3

in second screen you can change

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