react native跨平台移动应用开发 第二版读后笔记本 第三章页面导航笔记

在android 中页面跳转需要依靠 Intent如：

Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"，“137989**041”));
startActivity(intent);

在react-native 中跳转切换需要依靠navigator：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View, TextInput,Dimensions

} from 'react-native';

import {Navigator} from "react-native-deprecated-custom-components"
import LoginLeaf from './LoginLeaf.js';
import WaitingLeaf from './WaitingLeaf.js';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

let widthofMargin= Dimensions.get('window').width*0.05;
export default class App extends Component<Props> {


    constructor(props){
        super(props);
        this.renderScene=this.renderScene.bind(this);
        this.configureScene=this.configureScene.bind(this);
        this.handleBackAndroid=this.handleBackAndroid.bind(this);
    }

    configureScene(router){
        return Navigator.SceneConfigs.FadeAndroid;
    }

    renderScene(router, navigator){
            this.navigator = navigator;
            switch (router.name){
                case "login":
                    return <LoginLeaf navigator={navigator}/>
                break;
                case "waiting":
                    return <WaitingLeaf phoneNumber={router.phoneNumber}
                        userPw={router.userPw} navigator={navigator}
                    />
                break
            }
    }

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

    );
  }


    handleBackAndroid(){
        if (this.navigator.getCurrentRoutes().length>1){
            this.navigator.pop();
            return true;
        }
        return false;
    }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
     backgroundColor: 'white',
      flexDirection:'column'
  },
    bitTextPrompt:{
      margin:widthofMargin,
        backgroundColor:'gray',
        color:'white',
        textAlign:'center',
        fontSize:30

    }
});

上面代码里面的render()中
 Navigator就是控制页面跳转的

 

initialRouter: 路由初始化配置信息，就是说页面加载时，第一次需要展现什么内容

configureScene: 场景转换动画配置。在RN看来，从一个页面切换到另外一个页面，就是从一个场景切换到另外一个场景，这里配置的是场景动画信息，比如Navigator.SceneConfigs.FadeAndroid 就是淡入淡出

renderScene: 渲染场景，读取initialRouter传来的数据，确定显示那些内容。renderScene 调用renderScene(router, navigator)方法，会传入initialRouter中的信息renderScene(router, navigator)跟据信息来跳转页面。 

renderScene(router, navigator) 中name='logint' 所以进入LoginLeaf页面。

LoginLeaf页面代码:

export default class App extends Component<Props> {

  constructor(props){
    super(props);
    this.state={
        inputeNum:'',
        inputePW:''
    }
    this.updatePw=this.updatePw.bind(this);
      this.updateNum=this.updateNum.bind(this);
  }

    updateNum(newText){
        this.setState({inputeNum:newText})
    }

    updatePw(newText){
      this.setState({inputePW:newText})
    }

  render() {
    return (
        <View style={styles.container}>
            <TextInput style={styles.textInputStyle}
                       placeholder={'请输入手机号码'}
                       onChangeText={this.updateNum}
            />
            <Text style={styles.textPromptStyle}>
              您输的手机号码：{this.state.inputeNum}
                </Text>
            <TextInput style={styles.textInputStyle}
                       placeholder={'请输入密码'}
                       password={true}
                       onChangeText={this.updatePw}
            />

            <Text style={styles.bitTextPrompt} onPress={()=>this.userPressConfirm()}>
                确定
            </Text>
            
            
        </View>
    );
  }

    userPressConfirm(){
        this.props.navigator.push({
            phoneNumber:this.state.inputeNum,
            userPw:this.state.inputePW,
            name:'waiting',
        });
    }
    
    
    userPressAddressBook(){
      
    }
}




const styles = StyleSheet.create({
  container: {
    flex: 1,
     backgroundColor: 'white',
      flexDirection:'column'
  },
    textInputStyle:{
        margin:widthofMargin,
        backgroundColor:'gray',
        fontSize:20,
        height:50
    },
    textPromptStyle:{
       margin:widthofMargin,
        fontSize:20,
    },
    bitTextPrompt:{
      margin:widthofMargin,
        backgroundColor:'gray',
        color:'white',
        textAlign:'center',
        fontSize:30

    }
});

在render中分别给 TextInput 添加了监听事件 onChangeText，相当于Android中的

editText.addTextChangedListener回调的方法分别是updateNum ,updatePw,在分方法使用this.setState去重新设 inputeNum，inputePW的值。

给Text  添加点击事件onPress={()=>this.userPressConfirm()

填写后用户名跟密码后点击 确定。能过userPressConfirm()中的

this.props.navigator.push({
            phoneNumber:this.state.inputeNum,
            userPw:this.state.inputePW,
            name:'waiting',

        });

会回到 APP这个页面中同时也带入了参数。inputeNum,inputePW, name:'waiting',

回到APP这个页面中会继续调用renderScene(router, navigator)这个方法然后进入WaitingLeaf.

项止下载地址：https://download.csdn.net/download/tong6320555/10509549