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

   <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>