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没有设置背景颜色。设置背景颜色就可以了。

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....