ReactNative 基础篇 - 页面跳转 (Navigato

ReactNative 页面跳转的功能着实坑了我两天 . 今天终于调试好了 , 在此分享一下 . 学习新技术我一贯喜欢 先实践后理论 , 所以理论上可能说的不会很全面 . 但是代码肯定好使 !

---

关于基础的理论部分 , 在此推荐几篇文章 .

React/React Native 的ES5 ES6写法对照表

首先在index.ios.js里面注册Navigator 控件。
并指定默认页面为 FirstPageComponent .

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Navigator

} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

export default class HelloWorld extends React.Component {

render() {

    let defaultName = 'FirstPageName';
    let defaultComponent = FirstPageComponent;

    return (
      <Navigator  
            initialRoute={{ name: defaultName, component: defaultComponent }}  
            configureScene={(route) => {  
            return Navigator.SceneConfigs.FloatFromRight;  
        }}  
        renderScene={(route, navigator) => {  
            let Component = route.component;  
            return <Component {...route.params} navigator={navigator} />  
      }}/>
    );
  }
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

FirstPageComponent.js
获取到 navigator 对象 , 并navigator.push 到下一页面.

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

import SecondPageComponent from './SecondPageComponent';

export default class FirstPageComponent extends React.Component {

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

    render() {
        return(
           <View style={styles.container}>
                <TouchableOpacity  style={styles.button}
                onPress={this._pressButton.bind(this)}>

                   <Text style={{color:'white'}}>跳转到下一页面</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  button:{
    width : 200,
    height : 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor : '#707070',
  }, 

});

SecondPageComponent.js
获取到 navigator 对象, 并 navigator.pop 返回上一页面

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

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component {

    _pressButton() {
       const { navigator } = this.props;

       if(navigator) {
          //出栈，返回到上一页
          navigator.pop();
       }
    }

    render() {
      return(
          <View style={styles.container}>
             <TouchableOpacity  style={styles.button}
                onPress={this._pressButton.bind(this)}>

                  <Text style={{color:'white'}}>返回上一页</Text>
             </TouchableOpacity>
          </View>
      );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#DEB887',
  },
  button:{
    width : 200,
    height : 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor : '#707070',
  },

});

效果图

效果图.gif

---

页面间传值

第一页 向 第二页传值 最常用的做法就是 属性传值.
第二页 向 第一页传值 用方法回调 .

FirstPageComponent.js

_pressButton() {
    let _this = this;
    const { navigator } = this.props;

    //为什么这里可以取得 props.navigator?请看上文:
    //<Component {...route.params} navigator={navigator} />
    //这里传递了navigator作为props
    if(navigator) {
       navigator.push({
          name: 'SecondPageComponent',
          component: SecondPageComponent,

    //这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...
    //routes.params 里的每个key 作为props的一个属性:
    //这里的 params.id 就变成了 <Navigator id={} 传递给了下一个页面
          params: {
              id: this.state.id,
              //回调!从SecondPageComponent获取user
              getUser: function(user) {
                  _this.setState({
                     user: user
                  })
              }
           }
       });
    }
}

SecondPageComponent.js

const USER_MODELS = {
    1: { name: '张三', age: 23 },
    2: { name: '李四', age: 25 }
};

_pressButton() {
   const { navigator } = this.props;

   if(this.props.getUser) {
      let user = USER_MODELS[this.props.id];
      //回调传值给上个页面
      this.props.getUser(user);
   }

   if(navigator) {
    //出栈，返回到上一页
       navigator.pop();
   }
}