ReactNative 基础篇 - 页面跳转 (Navigator)

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 (
       {  
            return Navigator.SceneConfigs.FloatFromRight;  
        }}  
        renderScene={(route, navigator) => {  
            let Component = route.component;  
            return   
      }}/>
    );
  }
}

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?请看上文:
    //
    //这里传递了navigator作为props
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent
            });
        }
    }

    render() {
        return(
           
                

                   跳转到下一页面
                
            
        );
    }
}


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(
          
             

                  返回上一页
             
          
      );
    }
}

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?请看上文:
    //
    //这里传递了navigator作为props
    if(navigator) {
       navigator.push({
          name: 'SecondPageComponent',
          component: SecondPageComponent,

    //这里多出了一个 params 其实来自于

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();
   }
}