在React Native中要想实现Navigator导航器切换不同的界面就要先了解一个知识:其实了解过React Native的都应该知道,其实我们通过React Native写的这些“界面”,都是依附在一个Android应用中的Activity上的,所以这些“界面”其实被称为场景(Scene),摆放在一个屏幕中的组件,就共同构成了一个“场景(Scene)”场景简单来说其实就是一个占据全屏页面的React组件。
因为index.android.js这个文件相当于我们程序的入口,我们要在这个文件中创建我们的导航器对象,所以先看index.android.js这个文件中的内容:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator
} from 'react-native';
//一定要注意导包(这里导入的是你要显示的场景的包),不然跳转会报错
import MyScene from './MyScene';
export default class Skip extends Component {
render() {
let defaultName = 'MyScene';
let defaultComponent = MyScene;
return (
<Navigator
//指定了默认的页面,也就是启动app之后会看到的第一屏,需要两个参数,name跟component
//通过给initialRoute对象设置名称和对应的组件完成route的初始化,即只要传入需要跳转的组件的名称和组建对象,即可在renderScene中完成页面的跳转。
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;//下滑移出界面 FadeAndroid:表示的是淡入淡出的动画效果
}}
//导航器的加载方法
renderScene={(route, navigator) => {
let Component = route.component;
if(route.component){
//可以通过route里面的数据来渲染指定的内容,并且传递导航器对象到目标页面 route.params是为了方便场景之间传递数据
return <Component {...route.<span style="background-color: rgb(255, 0, 0);">params</span>} navigator={navigator} />
}
}}
/>
);
}
}
//设置的一些样式
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Skip', () => Skip);
然后看我一进入应用后要显示的场景MyScene.js文件(在该文件中,我没把导包内容粘上):
import MyTo from './MyTo';
export default class MyScene extends Component {
constructor(props){
super(props);
this.state = {
resultMessage:"返回来的数据的默认占位内容",
};
}
//在响应方法中,调用navitager的push方法,进入到下一个场景页面当中
_pressButton(){
const {navigator} = this.props;
//创建对象,作用就是能够拿到当前这个方法的对象,不然在使用this时,可能拿到其他方法的对象
var _this = this;
if (navigator) {
//打印日志,可以查看调试信息
console.log("----------------");
//就是将信息传递给导航器,我们就可以在这个时候将参数传递给Navigator
navigator.push({
name:'Second',
component:Second,
<span style="background-color: rgb(255, 0, 0);">params</span>:{
message:"这是从第一个界面中传递的数据",
//通过这种回调,获取到上一个页面中传递回来的数据
getResult:function(myMessage){
_this.setState({
resultMessage:myMessage,
})
}
}
})
}
}
render() {
return (
//这个组件用于封装视图,使其能够正确的响应触摸操作
//此组件与TouchableHighlight的区别在于并没有额外的颜色变化,更适于一般场景
<View >
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text style={{fontSize:30}}>{this.state.resultMessage}</Text>
</TouchableOpacity>
</View>
)
}
}
最后看我要跳转到的那个场景MyTo.js文件:
import React, { Component } from 'react';
import { View, Text,StyleSheet,TouchableOpacity } from 'react-native';
export default class MyTo extends Component {
constructor(props){
super(props);
this.state = {
//显示传递过来的数据的默认占位数据
message:"aaa",
};
}
//生命周期函数 在渲染之后调用 componentWillMount 在渲染之前调用
componentDidMount(){
this.setState({
message:this.props.message,
});
}
//点击调用的事件,在这个事件中实现返回上一个场景,并通过回调传递数据给上一个场景
_pressButton(){
const { navigator } = this.props;
//给navigator设置一个回调方法,用于给第一个页面设置信息,这样就可以完成返回时数据的传递
if(this.props.getResult){
this.props.getResult("这是从第二个界面中传递过来的数据");
}
if(navigator){
//类似于直接退出堆栈,返回上一个场景页面
navigator.pop();
}
}
//我们通过控制路由栈将页面出栈的方式pop()完成跳转回到第一个页面的功能
render(){
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text style={{fontSize:30}}>点击返回前一个界面</Text>
</TouchableOpacity>
<Text>第一个界面传入:{this.state.message}</Text>
</View>
);
}
}