今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator
一:Navigator
对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面。这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,很方便的组件。废话不多说:先上示例代码:
首先我们导入 Navigator 组件:
importReact, { ... Navigator, ... } from 'react-native';
使用方式:
render() { return ( <Navigator initialRoute={{ name: 'FirstPage', component: FirstPage }} configureScene={(route) => { return Navigator.SceneConfigs.HorizontalSwipeJump; }} renderScene={(route, navigator) => { letComponent = route.component; return <Component {...route.params} navigator={navigator}/> }} /> )}
上面的代码,初始化了导航组件,且设置默认显示页面为 FirstPage,这里需要注意两点:
name: 组件名
component: 组件Class名
Himi导入FirstPage时如下:
importFirstPagefrom './FirstPage'
所以 name 和 component 都填写的为FirstPage
上面一行是设置页面切换之间的动画效果,更多效果查看源文件:
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
importReact, { AppRegistry, Component, View, Text, StyleSheet, TouchableHighlight, } from 'react-native'; importSecondPagefrom './SecondPage'; class FirstPageextends React.Component { constructor(props) { super(props); this.state = { }; } nextEvent(){ const { navigator } = this.props; if(navigator) { navigator.push({ name: 'SecondPage', component: SecondPage, params: { titleText:'' } }) } } render() { return ( <Viewstyle={styles.himiViewStyle} > <Text style={styles.himiTextStyle}>HimiReactNative 教程 </Text> <Viewstyle={styles.himiViewStyle}> <TouchableHighlight underlayColor='#4169e1' onPress={this.nextEvent.bind(this)} > <Text style={styles.text} > 点击我进入[SecondPage]个页面 </Text> </TouchableHighlight> </View> </View> )} }; var styles = StyleSheet.create({ text: { color:'#f00', fontSize:20, }, himiViewStyle:{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, himiTextStyle:{ color:'#f00', fontSize:30, marginTop:70, }, }); module.exports = FirstPage;
这里我们主要看 nextEvent 函数内容,
得到Navigator组件,可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。
if(navigator) { //判断是否正常接收到传来的导航组件 navigator.push({ //利用此函数进行切换到指定页面 name: 'SecondPage',//目标组件名 component: SecondPage, //目标组件Class名 params: { titleText:'' } }) }
还需要强调的是params,此参数是页面切换时传入下个页面的参数书写形式。
获取时,直接 this.props.titleText 即可得到,简单、方便。
const { navigator } = this.props; if(navigator) { navigator.pop(); }
返回上一页面就十分简单了,不多赘述了。
Himi这里为了演示效果,所以下面把 ThreePage.js 也给出源码:(最后附上动态效果图)
importReact, { AppRegistry, Component, View, Text, Alert, StyleSheet, TouchableHighlight, } from 'react-native'; exportdefault class threePageextends React.Component { constructor(props) { super(props); this.state = { }; } backEvent(){ const { navigator } = this.props; if(navigator) { navigator.pop(); } } render() { return ( <Viewstyle={styles.himiViewStyle} > <Text style={styles.himiTextStyle}> ThreePage </Text> <Viewstyle={styles.himiViewStyle}> <TouchableHighlight underlayColor='#4169e1' onPress={this.backEvent.bind(this)} > <Text style={styles.text} > 返回[SecondPage]页面 </Text> </TouchableHighlight> </View> </View> )} }; var styles = StyleSheet.create({ text: { color:'#f00', fontSize:20, }, himiViewStyle:{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, himiTextStyle:{ color:'#f00', fontSize:30, marginTop:70, }, });
从上图效果可以看出,切换之间的页面可以直接通过手势滑动进行切换~:)