為了熟悉Navigator的頁面跳轉，通過一個小例子實現：註冊頁面輸入之後進入註冊等待頁面

首先程式入口頁面index.android.js 程式碼為：

import React, {Component} from 'react';
import {AppRegistry,Navigator,BackAndroid,Alert} from 'react-native';


import RegisterLeaft from './RegisterLeaft';
import WaitingLeaft  from './WaitingLeaft';

export default class NavigatorModule extends Component {

  configureScene(router){
    return Navigator.SceneConfigs.FadeAndroid;
  }
   
   renderScene(router,navigator){
    this._navigator = navigator;
    switch(router.name) {
   	case  "register":
   		return <RegisterLeaft navigator={navigator}/>
   	case  "waiting" :
   		return <WaitingLeaft 
             phoneNumber = {router.phoneNumber}
   		       userPW = {router.userPW}  
             navigator={navigator}
   		/>
   }
  }

   componentDidMount() {
     let navigator =this._navigator;
     BackAndroid.addEventListener(
     "NoviModuleListener",() =>{
       if(navigator && navigator.getCurrentRotes().length>1){
         navigator.pop();
         return true;
       }
         return false;
     }
     );
   }

   componentWillUnount(){
     BackAndroid.removeEventListener("NoviModuleListener");
   }

   render(){
     return(
      <Navigator
       initialRoute={{name:'register'}}
       configureScene={this.configureScene}
       renderScene ={this.renderScene}
      />
     );
  }


}
   


AppRegistry.registerComponent('AwesomeProject', () => NavigatorModule);


 

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

let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;
let leftStartPoint = totalWidth * 0.1;
let componentWidth = totalWidth * 0.8;

export default class RegisterLeaft  extends Component {

 constructor(props) {
    super(props);
    this.state={
     inputedNum:"",
     inputedPW:"",
    };
 }

  render() {
         return ( 
         	<View style = {styles.container} > 
         	<TextInput style = {styles.numberInputStyle}
            placeholder = {'請輸入手機號:'} 
            onChangeText={(inputedNum)=>this.setState({inputedNum})}
            />
            <Text style = {styles.textPromptStyle} >
            您輸入的手機號：{this.state.inputedNum}
            </Text >
            <TextInput style = {styles.passwordInputStyle}
            placeholder = { '請輸入密碼' }
            onChangeText={(inputedPW)=>this.setState({inputedPW})}
            password = 'true'
            /> 
            <Text style = {styles.bigTextPrompt}
              onPress = {this.userPressConfirm.bind(this)}
            >
            確定
            </Text> 
            </View>);
        }
       
    userPressConfirm(){
          this.props.navigator.push(
                    {
                       phoneNumber:this.state.inputedNum,
                       userPW:this.state.inputedPW,
                       name:'waiting'
                    }
                );
            }

        
  }

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    numberInputStyle: {
        top: 20,
        left: leftStartPoint,
        width: componentWidth,
        backgroundColor: 'gray',
        fontSize: 20

    },
    textPromptStyle: {
        top: 30,
        left: leftStartPoint,
        width: componentWidth,
        fontSize: 20
    },
    passwordInputStyle: {
        top: 50,
        left: leftStartPoint,
        width: componentWidth,
        backgroundColor: 'gray',
        fontSize: 20
    },
    bigTextPrompt: {
        top: 70,
        left: leftStartPoint,
        width: componentWidth,
        backgroundColor: 'gray',
        color: 'white',
        textAlign: 'center',
        fontSize: 40
    }
});

 

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

export default class WaitingLeaft extends Component{

    render() {
         return ( 
         	<View style = {styles.container} > 
            <Text style = {styles.textPromptStyle} >
             註冊使用手機號碼：{this.props.phoneNumber} 
            </Text >
            <Text style = {styles.textPromptStyle} >
            註冊使用密碼：{this.props.userPW} 
            </Text >
            <Text style = {styles.bigTextPrompt}
             onPress = {this.goBack.bind(this)}
            >
             返回
            </Text> 
            </View>);
        }

        goBack(){
           this.props.navigator.push(
                {
                    name:"register"
                }
            );
        }
  }

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

    },
    bigTextPrompt: {
        width: 300,
        backgroundColor: 'gray',
        color: 'white',
        textAlign: 'center',
        fontSize: 60
    }
});