React Native 在屏幕之间传递值

2025年3月17日 | 阅读 3 分钟

在创建一个包含多个屏幕的应用程序时，有时需要在屏幕之间传递值。这可以通过使用 this.props.navigation.navigate() 函数来实现。

此函数用于在不同屏幕之间导航。

在深入研究这个例子之前，您需要先浏览 React Native 导航。

示例

在这个例子中，我们将在第一个屏幕中输入值，并在第二个屏幕中获取它。

该值（参数）作为对象传递到第一个屏幕中，传递给 navigation.navigate 函数，如下所示：

相同的值（参数）在第二个屏幕中读取为：

创建一个HomeScreen.js文件，并添加一个 TextInput 组件用于输入值，以及一个 Button 用于提交。 TextInput组件具有一个 onChangeText 属性，该属性接受一个函数，该函数将在文本更改时调用。

HomeScreen.js

import React from 'react';
//import react in our code.
import { StyleSheet, View, Button, TextInput } from 'react-native';

export default class HomeScreen extends React.Component {

    constructor(props) {
        //constructor to set default state
        super(props);
        this.state = {
            username: '',
        };
    }
    static navigationOptions = {
        title: 'Home',
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        //headerTintColor: '#0ff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    };

    render() {
        const { navigate } = this.props.navigation;
        return (
            //View to hold our multiple components
            <View style={styles.container}>
            {/*Input to get the value from the user*/}
            <TextInput
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
        placeholder={'Enter Any value'}
        style={styles.textInput}
        />
        <View style={styles.buttonStyle}>
            <Button
        title="Submit"
        // color="#00B0FF"
        onPress={() =>
        this.props.navigation.navigate('Profile', {
            userName: this.state.username,
            otherParam: '101',
        })
    }
        />
        </View>
        </View>
    );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        padding: 16,
    },
    textInput: {
        height: 45,width: "95%",borderColor: "gray",borderWidth: 1,fontSize:20,
    },
    buttonStyle:{
        width: "93%",
        marginTop: 50,
        backgroundColor: "red",
    }
});

在上面的代码中，userName: this.state.username 将输入到TextInput组件中的值存储起来，而 otherParam: '101' 直接分配一个值。单击Button后，userName 和 otherParam 将传递到Profile屏幕。

ProfileScreen.js

在此屏幕中，我们使用 navigation.getParam('paramValue', 默认值) 接收 userName 和 otherParam 的值，并将它们存储到对象 user_name 和 other_param 中。 JavaScript对象的值使用 JSON.stringify(object) 函数转换为字符串。

import React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';

export default class ProfileScreen extends React.Component {
    static navigationOptions = {
        title: 'Profile',
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        //headerTintColor: '#0ff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    };
    render() {
        {/*Using the navigation prop we can get the
              value passed from the previous screen*/}
        const { navigation } = this.props;
        const user_name = navigation.getParam('userName', 'NO-User');
        const other_param = navigation.getParam('otherParam', 'some default value');
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text style={{ marginTop: 16,fontSize: 20,}}>
                    This is Profile Screen and we receive value from Home Screen
                </Text>
                <Text style={styles.textStyle}>User Name: {JSON.stringify(user_name)}</Text>
                <Text style={styles.textStyle}>Other Param: {JSON.stringify(other_param)}</Text>
                <View style={styles.buttonStyle}>
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    textStyle: {
        fontSize: 23,
        textAlign: 'center',
        color: '#f00',
    },

    buttonStyle:{
        width: "93%",
        marginTop: 50,
        backgroundColor: "red",
    }
});

App.js

创建 App.js 文件，因为它是应用程序的入口点，并导入 HomeScreen 和 ProfileScreen。使用 initialRouteName 将 HomeScreen 设置为第一个屏幕。

import React from 'react';
import {createStackNavigator,createAppContainer} from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Profile: ProfileScreen
    },
    {
        initialRouteName: "Home"
    }
);
export default createAppContainer(AppNavigator);

输出

React Native Passing Value between Screen

我们还将参数发送和接收到JSON中，例如：

HomeScreen.js

onPress={() =>
    navigate('Profile', {
        JSON_ListView_Clicked_Item: this.state.username,
    })
}

ProfileScreen.js

此屏幕以两种方式读取值，而不进行检查。

或者检查输入值是否为null

{this.props.navigation.state.params.JSON_ListView_Clicked_Item
   ? this.props.navigation.state.params.JSON_ListView_Clicked_Item
    : 'No Value Passed'}

<Text style={styles.textStyle}>
        {this.props.navigation.state.params.JSON_ListView_Clicked_Item}
    </Text>
<Text style={{ marginTop: 16,fontSize: 20, }}>With Check</Text>
    {/*If you want to check the value is passed or not,
            you can use conditional operator.*/}
<Text style={styles.textStyle}>
    {this.props.navigation.state.params.JSON_ListView_Clicked_Item
        ? this.props.navigation.state.params.JSON_ListView_Clicked_Item
        : 'No Value Passed'}

输出