React Native教程之Navigator的使用

花了两天时间搞出了navigator push到tabbarios的页面，给自己做个小小的笔记。

首先在 index.ios.js 页面中定义app的根视图

mport React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Text,Navigator,View
} from 'react-native';
import first from './first';
export default class Test extends Component {
  render() {
    let firstViewName ='first';//首页的名字定义
    let firstComponent= first; //首页的js

    return (
      <Navigator style={{flex:1}}
          initialRoute = {{ name: firstViewName,component: firstComponent }}
            //initialRoute={{ name: defaultName,component: defaultComponent }}
            // 这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。需要填写两个参数: name 跟 component。
          configureScene = {(route) => {
            return Navigator.SceneConfigs.PushFromRight ;//设置push的动画效果
          }}
          renderScene = {(route,navigator) => { //route里其实就是上面initialRout的对象包含了name,component的值。
           //navigator是一个Navigator的对象
            let Component = route.component;
            return <Component {...route.params} navigator = {navigator} />
          }} />
           //被render出来给用户看到的component，然后navigator作为props传递给了这个component。
          
    );
  }
}

接下来我们定义first.js的界面

import {
   View,TouchableOpacity,} from 'react-native';

import second from './second'; //导入要被push的第二个页面的js
 
 export default class first extends Component {

   constructor(props){
     super(props);
     this.state= {

     };

   }
 render() {

     return (
       <View style={styles.container}>
        
           {/*按钮*/}
          <TouchableOpacity style={mainStyle.nextButton} onPress={this.onPushButton.bind(this)}>
            <Text style={mainStyle.buttonText}>下一页面</Text>
          </TouchableOpacity>
       </View>
     );
   }

//点击push事件
onPushButton(){
     
   const {navigator} = this.props;
        if(navigator){
          navigator.push({
            name:'second',//下一个页面的名称
            component:second,//下个页面的js
            params:{
              keyName:'keyValue' //可以传任意值
            }
          })
        }
}


pop返回事件
在second.js的按钮点击事件中
onPopButton(){
    const {navigator} =this.props;
    if(navigator){
      navigator.pop();
    }
  }

注意：push到第二个界面，如果感觉动画有延迟，是因为第二个页面没有子view或者父view没有设置背景颜色。设置背景颜色就可以了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!