【REACT NATIVE 系列教程之五】Navigator(页面导航)的基本使用与传参
Zoila53P
8年前
<p>今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator</p> <p>一:Navigator</p> <p>对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面。这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,很方便的组件。废话不多说:先上示例代码:</p> <p>首先我们导入 Navigator 组件:</p> <pre> <code class="language-javascript">importReact, { ... Navigator, ... } from 'react-native'; </code></pre> <p>使用方式:</p> <pre> <code class="language-javascript">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}/> }} /> )} </code></pre> <p>上面的代码,初始化了导航组件,且设置默认显示页面为 FirstPage,这里需要注意两点:</p> <p>1. 我们主要关注 Navigator 里 initialRoute 中的 两个参数:</p> <p>name: 组件名</p> <p>component: 组件Class名</p> <p>Himi导入FirstPage时如下:</p> <pre> <code class="language-javascript">importFirstPagefrom './FirstPage' </code></pre> <p>所以 name 和 component 都填写的为FirstPage</p> <p>2. <Component {…route.params} navigator={navigator} /></p> <p>上面这一行是将navigator作为props进行传递</p> <p>3. Navigator.SceneConfigs.HorizontalSwipeJump</p> <p>上面一行是设置页面切换之间的动画效果,更多效果查看源文件:</p> <p>node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js</p> <p>下面我们看下FirstPage.js :</p> <pre> <code class="language-javascript">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; </code></pre> <p>这里我们主要看 nextEvent 函数内容,</p> <p>const { navigator } = this.props; 这一句是以props传递过来的navigator进行接收。</p> <p>得到Navigator组件,可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。</p> <p>下面代码段演示了如何切换到下一个页面:</p> <pre> <code class="language-javascript">if(navigator) { //判断是否正常接收到传来的导航组件 navigator.push({ //利用此函数进行切换到指定页面 name: 'SecondPage',//目标组件名 component: SecondPage, //目标组件Class名 params: { titleText:'' } }) } </code></pre> <p>还需要强调的是params,此参数是页面切换时传入下个页面的参数书写形式。</p> <p>获取时,直接 this.props.titleText 即可得到,简单、方便。</p> <p>下面代码段演示如何返回上个页面:</p> <pre> <code class="language-javascript">const { navigator } = this.props; if(navigator) { navigator.pop(); } </code></pre> <p>返回上一页面就十分简单了,不多赘述了。</p> <p>Himi这里为了演示效果,所以下面把 <strong>ThreePage.js</strong> 也给出源码:(最后附上动态效果图)</p> <pre> <code class="language-javascript">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, }, }); </code></pre> <p>运行效果图:(点击查看动态效果)</p> <p><img src="https://simg.open-open.com/show/0bdbcffd8b250cda4d5e9db386fe966d.gif"></p> <p>从上图效果可以看出,切换之间的页面可以直接通过手势滑动进行切换~:)</p> <p> </p> <p>来自: <a href="/misc/goto?guid=4959673719905637620" rel="nofollow">http://www.himigame.com/react-native/2248.html</a></p> <p> </p>