如何使用 class 组件传递参数并将其传递到 React Native 的另一个组件中

Question

我想将参数从一个屏幕传递到另一个屏幕，但它不起作用。

我已经按照文档尝试了一种方法，但出现错误且无法解决。

我在下面提到了我的代码，我无法解决其中的实际问题，它给我一个错误，因为 TypeError: onPress 不是一个函数。（在 'onPress(event)' 中，'onPress' 是 Object 的一个实例）在 Screen2.js 文件的第 {this.props.navigation.state.params.Name}

行

//App.js File

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './Screens/Screen1';
import DetailsScreen from './Screens/Screen2';

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Screen1"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="Screen2" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
export default MyStack;


//Screen1.js Code here

import React,{Component} from "react";
import {View, Text, TextInput, Button} from "react-native";

class Screen1 extends Component{
    constructor(props){
        super(props),
        this.state={
            username :'',
        }
    }
  render(){
    return(
        <View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
          <Text style={{fontSize:20}}>Login Page</Text>
          <TextInput placeholder={"Please Enter Your Name"} onChangeText={(username)=>this.setState({username})} />
          <Button title={"Login"} onPress = {()=> this.props.navigation.navigate('Screen2'), { Name: this.state.username }} />
        </View>
    )
  }
}
export default Screen1;


//Screen2.js Code here
import React, { Component } from "react";
import { View, Text } from "react-native";

class Screen2 extends Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>
                    Welcome {this.props.navigation.state.params.Name}
                </Text>
            </View>
        )
    }
}
export default Screen2;

Answer 1

这是你的错误：

<Button title={"Login"} onPress = {()=> this.props.navigation.navigate('Screen2'), { Name: this.state.username }} />

您没有传递两个参数来导航，您传递的是两个不同的东西。

将上面的行替换为：

<Button title={"Login"} onPress = {()=> this.props.navigation.navigate('Screen2', { Name: this.state.username })} />

另一个错误是：

<Text>Welcome {this.props.navigation.state.params.Name}</Text>

React Navigation 有另一个参数 route。您可以像这样访问它： const { Name } = this.props.route.params;

或

<Text>Welcome {this.props.route.params.Name}</Text>

如何使用 class 组件传递参数并将其传递到 React Native 的另一个组件中

How to pass parameter and get it into another component in react native using class component

reactjs

react-navigation