ReactNative 頁面跳轉(zhuǎn)的功能著實(shí)坑了我兩天 . 今天終于調(diào)試好了 , 在此分享一下 . 學(xué)習(xí)新技術(shù)我一貫喜歡 先實(shí)踐后理論 , 所以理論上可能說的不會很全面 . 但是代碼肯定好使 !

關(guān)于基礎(chǔ)的理論部分 , 在此推薦幾篇文章 .

React/React Native 的ES5 ES6寫法對照表

首先在index.ios.js里面注冊Navigator 控件。
并指定默認(rèn)頁面為 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'}}>跳轉(zhuǎn)到下一頁面</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

頁面間傳值

第一頁 向 第二頁傳值 最常用的做法就是 屬性傳值.
第二頁 向 第一頁傳值 用方法回調(diào) .

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,

    //這里多出了一個(gè) params 其實(shí)來自于<Navigator 里的一個(gè)方法的參數(shù)...
    //routes.params 里的每個(gè)key 作為props的一個(gè)屬性:
    //這里的 params.id 就變成了 <Navigator id={} 傳遞給了下一個(gè)頁面
          params: {
              id: this.state.id,
              //回調(diào)!從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];
      //回調(diào)傳值給上個(gè)頁面
      this.props.getUser(user);
   }

   if(navigator) {
    //出棧芯杀，返回到上一頁
       navigator.pop();
   }
}