关注我们

React Native - 导航传值

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

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

在此示例中，我们将在第一个屏幕中输入值，然后将其进入第二个屏幕。

值(param)作为第一个屏幕中的对象传递给 navigation.navigate 函数:

this.props.navigation.navigate('RouteName', { /* params go here */ })

在第二个屏幕中读取的值(参数)相同:

复制代码

this.props.navigation.getParam(paramName, defaultValue)

创建一个HomeScreen.js文件，并添加一个TextInput组件作为输入值和一个Button来提交。 TextInput组件具有一个onChangeText道具，该prop具有一个函数，只要文本更改，该函数就会被调用。

HomeScreen.js.

复制代码

import React from 'react';
//导入所需要的组件
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 里面包含多个组件
            <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'直接分配一个值。单击按钮后，userName和otherParam会传递到Profile屏幕。

profilescreen.js - 在此屏幕中，我们使用navigation.getParam('paramValue'，default value)接收userName和otherParam的值，并将其分别存储到对象user_name和other_param中。使用JSON.stringify(object)函数将JavaScript对象的值转换为字符串。

复制代码

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() {
        {/*使用navigation prop，我们可以得到 从前一个屏幕传递过来的值*/}
        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文件，因为它是应用程序的入口，并导入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发送和接收参数，例如:

链接：https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-passing-value-between-screen.html

来源：LearnFk无涯教程网

HomeScreen.js.

复制代码

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

ProfileScreen.js - 此屏幕以两种方式读取值而无需检查。

复制代码

{this.props.navigation.state.params.JSON_ListView_Clicked_Item}

或检查输入值为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'}