在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