ReactNative Navigator 页面传值_react navigator传值-CSDN博客

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/73648316

本文介绍了一个使用React Native实现页面间传值的例子。通过创建输入页和详情页，演示了如何从前一个页面向后一个页面传递输入框的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative Navigator 页面传值

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
} from 'react-native';
import {Navigator} from "react-native-deprecated-custom-components"

//从前一个页面 向后一个页面传值

//定义InputPage 输入框 按钮
let InputPage = React.createClass({
    getInitialState: function () {
        return {
            //记录输入框的之
            content: ""
        }
    },
    //获取输入框的内容
    getInputContent: function (inputText) {
        this.setState({
            content: inputText
        })
    },
    pushNextPage: function () {
        //退出下一级页面，并且传值
        let route = {
            component: DetailPage,
            passProps: {
                showText: this.state.content
            }
        };
        this.props.navigator.push(route);
    },
    render: function () {
        return (
            <View style={inputStyles.container}>
                <TextInput
                    placeholder="请输入内容"
                    onChangeText={this.getInputContent}
                    style={inputStyles.input}/>
                <TouchableOpacity
                    onPress={this.pushNextPage}
                    style={inputStyles.btn}>
                    <Text>进入下一页</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

let inputStyles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white"
    },
    input: {
        height: 45,
        marginLeft: 25,
        marginRight: 25,
        borderWidth: 1,
        paddingLeft: 5,
        borderColor: "black",
        borderRadius: 4
    },
    btn: {
        marginTop: 20,
        height: 30,
        borderWidth: 1,
        borderRadius: 4,
        borderColor: "black",
        padding: 5,
        justifyContent: "center",
        alignItems: "center"
    }
});

//detailPage 显示文本、按钮
let DetailPage = React.createClass({
    //返回上一级
    popFrontPage: function () {
        //返回上一级
        this.props.navigator.pop();
    },
    render: function () {
        return (
            <View style={detailStyles.container}>
                <Text style={detailStyles.text}>{this.props.showText}</Text>
                <TouchableOpacity
                    onPress={this.popFrontPage}
                    style={detailStyles.btn}>
                    <Text>返回上一页</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

let detailStyles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white"
    },
    text: {
        marginLeft: 25,
        marginRight: 25,
        padding: 5,
        backgroundColor: "cyan",
        fontSize: 20,
        textAlign: "center"
    },
    btn: {
        marginTop: 20,
        height: 30,
        borderWidth: 1,
        borderRadius: 4,
        borderColor: "black",
        padding: 5,
        justifyContent: "center",
        alignItems: "center"
    }
});

let MyNavigatorPassValue = React.createClass({
    render: function () {
        let rootRoute = {
            component: InputPage,
            //用于传递值的内容
            passProps: {}
        }
        return (
            <View style={{flex: 1}}>
                <Navigator
                    initialRoute={rootRoute}
                    configureScene={(route) => {
                        return Navigator.SceneConfigs.PushFromRight;
                    }}
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return (
                            <Component
                                navigator={navigator}
                                route={route}
                                {...route.passProps}
                            />
                        );
                    }
                    }
                />
            </View>
        );
    }
});

let styles = StyleSheet.create({});


module.exports = MyNavigatorPassValue;