React-native页面跳转传值实现

首先是index.android.js

我们需要用到Navigator来进行页面的跳转，所有的js文件处于同一目录下面，

在FirstPageComponent页面中我们需要定义好参数：

constructor(props) {
        super(props);
        this.state = {};
    }
将参数传值给需要传值的页面：

if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
                params:{
                    user:this.state.user,
                    pwd:this.state.pwd
                }
            })
        }
在TextInput控件中对参数进行赋值：

onChangeText={(text) => this.setState({user: text})}
第二个页面接收的参数就很简单了：

componentDidMount() {
            //这里获取从FirstPageComponent传递过来的参数: id
            this.setState({
                user:this.props.user,
                pwd:this.props.pwd
            });
    }
第二个页面TextInput控件接收值就这样写：

value={this.state.user }
具体实现请看如下源码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  View,
  Navigator
} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

class ReactNativeDemo extends Component {
  render() {
    var defaultName = 'FirstPageComponent';
    var defaultComponent = FirstPageComponent;
    return (
        <Navigator
            initialRoute={{ name: defaultName, component: defaultComponent }}
            configureScene={(route) => {
            return Navigator.SceneConfigs.HorizontalSwipeJump;
        }}
        renderScene={(route, navigator) => {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} />
        }}/>
    );
  }
}
AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

接下来就是应用启动后的首屏页面

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React,{
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    Image,
    View,
    TextInput
} from 'react-native';

import SecondPageComponent from './SecondPageComponent';

var TouchableButton = require('./module/TouchableButton');

class FirstPageComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    _pressButton() {
        const { navigator } = this.props;
        //或者写成 const navigator = this.props.navigator;
        //为什么这里可以取得 props.navigator?请看上文:
        //<Component {...route.params} navigator={navigator} />
        //这里传递了navigator作为props
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
                params:{
                    user:this.state.user,
                    pwd:this.state.pwd
                }
            })
        }
    }

    render() {
        return (
            <View style={{backgroundColor:'#f4f4f4',flex:1}}>
                <Image
                    style={styles.style_image}
                    source={require('./app_icon.jpg')}/>
                <TextInput
                    style={styles.style_user_input}
                    placeholder='QQ号/手机号/邮箱'
                    numberOfLines={1}
                    autoFocus={true}
                    underlineColorAndroid={'transparent'}
                    onChangeText={(text) => this.setState({user: text})}
                    textAlignVertical='center'
                    textAlign='center'/>
                <View style={{height:1,backgroundColor:'#f4f4f4'}}/>
                <TextInput
                    style={styles.style_pwd_input}
                    placeholder='密码'
                    numberOfLines={1}
                    underlineColorAndroid={'transparent'}
                    onChangeText={(text) => this.setState({pwd: text})}
                    secureTextEntry={true}
                    textAlignVertical='center'
                    textAlign='center'
                />

                <View  style={styles.style_view_commit}>
                    <Text style={{color:'#fff'}}>
                       登录
                    </Text>
                </View>

                <View>
                    <TouchableButton
                        underlayColor='#4169e1'
                        style={styles.style_view_button}
                        onPress={this._pressButton.bind(this)}
                        text='登录有点击效果-跳转页面'>
                    </TouchableButton>
                </View>

                <View style={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}>
                     <Text style={styles.style_view_unlogin}>
                         无法登录?
                    </Text>
                    <Text style={styles.style_view_register}>
                         新用户
                    </Text>
                </View>
          </View>
        );
    }
}

const styles = StyleSheet.create({
  style_image:{
    borderRadius:45,
    height:70,
    width:70,
    marginTop:40,
    alignSelf:'center',
  },
  style_user_input:{
      backgroundColor:'#fff',
      marginTop:10,
      height:45,
  },
  style_pwd_input:{
      backgroundColor:'#fff',
      height:45,
  },
  style_view_commit:{
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      borderColor:'#5bc0de',
      height:45,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_button:{
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      borderColor:'#5bc0de',
      height:45,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_unlogin:{
    fontSize:15,
    color:'#63B8FF',
    marginLeft:10,
  },
  style_view_register:{
    fontSize:15,
    color:'#63B8FF',
    marginRight:10,
    alignItems:'flex-end',
    flex:1,
    flexDirection:'row',
    textAlign:'right',
  }
});

export default FirstPageComponent

接下来是我们跳转的第二个页面

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

import FirstPageComponent from './FirstPageComponent';

var TouchableButton = require('./module/TouchableButton');

class SecondPageComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            user:null,
            pwd:null
        };
    }

    componentDidMount() {
            //这里获取从FirstPageComponent传递过来的参数: id
            this.setState({
                user:this.props.user,
                pwd:this.props.pwd
            });
    }

    _pressButton() {
        const { navigator } = this.props;
        if(navigator) {
            //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent了
            navigator.pop();
        }
    }

    render() {
        return (
            <View style={{backgroundColor:'#f4f4f4',flex:1}}>
                <Image
                    style={styles.style_image}
                    source={require('./app_icon.jpg')}/>
                <TextInput
                    style={styles.style_user_input}
                    placeholder='QQ号/手机号/邮箱'
                    numberOfLines={1}
                    autoFocus={true}
                    underlineColorAndroid={'transparent'}
                    value={this.state.user }
                    textAlignVertical='center'
                    textAlign='center'/>
                <View style={{height:1,backgroundColor:'#f4f4f4'}}/>
                <TextInput
                    style={styles.style_pwd_input}
                    placeholder='密码'
                    numberOfLines={1}
                    underlineColorAndroid={'transparent'}
                    value={this.state.pwd }
                    secureTextEntry={true}
                    textAlignVertical='center'
                    textAlign='center'
                />

                <View  style={styles.style_view_commit}>
                    <Text style={{color:'#fff'}}>
                       登录
                    </Text>
                </View>

                <View>
                    <TouchableButton
                        underlayColor='#4169e1'
                        style={styles.style_view_button}
                        onPress={this._pressButton.bind(this)}
                        text='登录有点击效果-跳转页面'>
                    </TouchableButton>
                </View>

                <View style={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}>
                     <Text style={styles.style_view_unlogin}>
                         无法登录?
                    </Text>
                    <Text style={styles.style_view_register}>
                         新用户
                    </Text>
                </View>
          </View>
        );
    }
}

const styles = StyleSheet.create({
  style_image:{
    borderRadius:45,
    height:70,
    width:70,
    marginTop:40,
    alignSelf:'center',
  },
  style_user_input:{
      backgroundColor:'#fff',
      marginTop:10,
      height:45,
  },
  style_pwd_input:{
      backgroundColor:'#fff',
      height:45,
  },
  style_view_commit:{
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      borderColor:'#5bc0de',
      height:45,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_button:{
      marginTop:15,
      marginLeft:10,
      marginRight:10,
      backgroundColor:'#63B8FF',
      borderColor:'#5bc0de',
      height:45,
      borderRadius:5,
      justifyContent: 'center',
      alignItems: 'center',
  },
  style_view_unlogin:{
    fontSize:15,
    color:'#63B8FF',
    marginLeft:10,
  },
  style_view_register:{
    fontSize:15,
    color:'#63B8FF',
    marginRight:10,
    alignItems:'flex-end',
    flex:1,
    flexDirection:'row',
    textAlign:'right',
  }
});

export default SecondPageComponent