React Native 基础篇之Navigator页面的跳转与数据的传递

这里通过一个简单的例子来阐述Navigator页面的跳转与数据的传递：

查询用户信息的例子，FirstPageComponent传递id到SecondPageComponent，然后SecondPageComponent返回user信息给FirstPageComponent

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

import FirstPageComponent from "./FirstPageComponent";

export default class SampleComponent extends Component {
    
    constructor(props){
      super(props);
      this.state = {
      };
    }
    
    render() {
        let defaultName = 'FirstPageComponent';
        let defaultComponent = FirstPageComponent;
        return (
           <Navigator
              //这个指定了默认的页面，也就是启动app之后会看到界面的第一屏
              initialRoute={{ name: defaultName, component: defaultComponent }}
              //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，
              //有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
              configureScene={(route) => {
                return Navigator.SceneConfigs.VerticalDownSwipeJump;
              }}
              //route就是传递的name,component，navigator是一个Navigator的对象
              renderScene={(route, navigator) => {
                let Component = route.component;
                /**
                 *  
                   ... JSX的延展属性
                   var props = {};
                   props.propA = x;
                   props.propB = y;
                   var component = <Component {...props}/>
                   这样 component 这个JSX元素有了props变量的所有属性
                   navigator作为props传递给了这个component
                 */
                return <Component {...route.params} navigator={navigator} />
              }} />
        );
    }

}

const styles = StyleSheet.create({
    counter:{
      flex:1,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'#e8e8e8'
    }
});

FirstPageComponent.js

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

import SecondPageComponent from "./SecondComponent";

export default class FirstPageComponent extends Component {
    
    constructor(props){
      super(props);
      this.state = {
      id: 2,
      user: null,
    };
    _this = this;
    }
    
    render() {
    if(_this.state.user){
        return(
            <View style={styles.counter}>
                <Text>用户信息: {JSON.stringify(_this.state.user)}</Text>
            </View>
        );  
        } else {
            return (
                <View style={styles.counter}>
                    <TouchableOpacity onPress={()=>{_this._pressButton()}}>
                        <Text>查询ID为{_this.state.id}的用户信息</Text>
                    </TouchableOpacity>
                </View>
            );
        }
       
    }

    _pressButton(){
      const {navigator} = this.props;
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
                /**页面间数据的传递 与将第二个页面如何将结果返回给第一个页面的方法
                 * 
                 * 1.通过push,传递参数
                 *   这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...
                 *   id
                 * 2.把上一个页面的实例或者回调方法，作为参数传递到当前页面来，在当前页面操作上一个页面的state
                 */
                params: {
                    id: _this.state.id,
                    getUser(user) {
                        _this.setState({
                            user: user
                        })
                    },
                }
            })
        }
    }
}

const styles = StyleSheet.create({
    counter:{
      flex:1,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'#e8e8e8'
    }
});

SecondComponent.js

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

import FirstPageComponent from './FirstPageComponent';

const USER_MODELS = {
    1: { name: 'mot', age: 23 },
    2: { name: '晴明大大', age: 25 }
};

export default class SecondComponent extends Component {
    
    constructor(props){
      super(props);
      this.state = {
          id: null
      };
     _this = this;
    }

    _pressButton() {
        const {navigator} = _this.props;
        if (_this.props.getUser) {
            let user = USER_MODELS[_this.props.id];
            _this.props.getUser(user);
        }
        if (navigator) {
            //把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent
            navigator.pop();
        }
    }

    componentDidMount() {
      this.setState({id:_this.props.id});
    }

    render() {
        return (
            <View style={styles.counter}>
                <Text>获得的参数:{_this.state.id}</Text>
                <TouchableOpacity onPress={()=>{_this._pressButton()}}>
                    <Text>点我跳回去</Text>
                </TouchableOpacity>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    counter:{
      flex:1,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'#e8e8e8'
    }
});

链接：http://pan.baidu.com/s/1qXOnMAK 密码：xq34