转载

【REACT NATIVE 系列教程之五】Navigator(页面导航)的基本使用与传参

今天介绍一种应用开发中常用的负责页面切换及导航功能的组件: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,这里需要注意两点:

1. 我们主要关注 Navigator 里  initialRoute 中的 两个参数:

name: 组件名

component: 组件Class名

Himi导入FirstPage时如下:

importFirstPagefrom './FirstPage' 

所以 name 和  component 都填写的为FirstPage

2. <Component {…route.params} navigator={navigator} />

上面这一行是将navigator作为props进行传递

3.  Navigator.SceneConfigs.HorizontalSwipeJump

上面一行是设置页面切换之间的动画效果,更多效果查看源文件:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

下面我们看下FirstPage.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 函数内容,

const { navigator } = this.props; 这一句是以props传递过来的navigator进行接收。

得到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,   },    }); 

运行效果图:(点击查看动态效果)

【REACT NATIVE 系列教程之五】Navigator(页面导航)的基本使用与传参

从上图效果可以看出,切换之间的页面可以直接通过手势滑动进行切换~:)

原文  http://www.himigame.com/react-native/2248.html
正文到此结束
Loading...