RN- Navigator的使用及传值

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput
} from 'react-native';

import {Navigator} from 'react-native-deprecated-custom-components';

//从前一个页面向后一个页面传值.
//定义InputPage 输入框 ,按钮
var InputPage = React.createClass({

    getInitialState(){

        return{
            //记录输入框的值
            content:''
        }
    },

    getInputContent:function (inputText) {
      //将输入框的值进行记录
        this.setState({
           content:inputText
        });
    },

    pushNextPage:function () {
      //推出下一级页面,并且传值

        //路由对象
        var route = {
            component:DetailsPage,
            passProps:{
                //将输入框的内容传递给下一级页面
                showText:this.state.content
            }
        }
        this.props.navigator.push(route);
    },

    render:function () {
        return (
            
                
                this.pushNextPage()}>
                    进入下一页
                
            
        );
    }
});


//DetailsPage  显示文本 , 按钮

var DetailsPage = React.createClass({

    popFrontPage:function () {
      //返回上一级页面
        this.props.navigator.pop();
    },

    render:function () {
        return (

            
                {this.props.showText}
                this.popFrontPage()}
                >
                    返回上一页
                
            
        );
    }
});

var LessonNavigator = React.createClass({

    render:function () {

        var rootRoute = {
            component:InputPage,
            //存储需要传递的内容
            passProps:{

            }
        }

        return(
            
                {
                    return Navigator.SceneConfigs.PushFromRight;
                }}
                renderScene={(route, navigator) =>{
                    var Component = route.component;
                    return(
                        
                    )
                }}
                />
            
        );
    }

});

var inputStyle = StyleSheet.create({

    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'white',
    },

    input:{
        height:45,
        marginLeft:25,
        marginRight:25,
        paddingLeft:5,
        borderWidth:1,
        borderColor:'black',
        borderRadius:4,
    },
    btn:{
        marginTop:20,
        height:30,
        borderWidth:1,
        borderRadius:4,
        borderBottomColor:'black',
        padding:5,
        justifyContent:'center',
        alignItems:'center',

    }

});

var detailsStyle = StyleSheet.create({

    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'white',
    },
    text:{
        marginTop:25,
        marginRight:25,
        padding:25,
        backgroundColor:'cyan',
        fontSize:20,
        textAlign:'center',
    },
    btn:{
        marginTop:20,
        height:30,
        borderWidth:1,
        borderRadius:4,
        borderBottomColor:'black',
        padding:5,
        justifyContent:'center',
        alignItems:'center',
    }
});


module.exports = LessonNavigator;
RN- Navigator的使用及传值_第1张图片
RN- Navigator的使用及传值

你可能感兴趣的:(RN- Navigator的使用及传值)