React-Native组件之 Navigator和NavigatorIOS

对于app而言，一款应用往往涉及到很多的页面，而页面之间的跳转Android和iOS实现也各不相同。在iOS上，系统为我们提供了UINavigationController控件用来专门控制页面的跳转，iOS的实现思路很清晰，为按钮添加action事件，点击之后跳转到指定的页面即可。例如：

//定义一个Button，点击后跳转到另一个页面
    UIButton * button=[UIButton buttonWithType:UIButtonTypeSystem];
    button.frame=CGRectMake(130, 220, 100, 30);
    [button addTarget:self action:@selector(toNext)      forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"跳转登录" forState:UIControlStateNormal];
[self.view addSubview:button];
//省略…
-(void)toNext{
    UIBarButtonItem * back=[[UIBarButtonItem alloc]init];
    back.title = @"返回";
    self.navigationItem.backBarButtonItem = back;

    SecondViewController * second = [[SecondViewController alloc]init];
    [self.navigationController pushViewController:second animated:YES];
}

对于Android来说，Android的跳转通过Intent来进行跳转，而返回等操作，Android一般为我们实现了物理返回和软件返回两种。物理返回我们一般通过捕捉onKeyDown用户事件，而软件返回主要通过在界面上添加返回按钮实现页面的返回操作。

Navigator 与 NavigatorIOS

在移动开发过程中，几乎所有的APP中或多或少都会涉及到多个界面间的切换，在React Native中有两个组件负责实现这样的效果 —— Navigator 和 NavigatorIOS。Navigator可以在iOS和Android同时使用，而NavigatorIOS则是包装了UIKit库的导航功能，使用户可以使用左划功能来返回到上一界面。

Navigator 属性

Navigator常见的属性如下：

属性 类型 说明
initialRoute object 导航的初始route（第一个显示的）；
initialRouteStack object 导航的route集合，如果initialRoute没有设置，这个属性是必填的。如果这个属性没有，它将会默认传递一个仅仅包含initialRoute的集合；
renderScene function 必填的方法，它根据给定的ruote渲染夜间，将被使用route和navigator对象参数调用；
navigationBar view 导航的可选组件导航标题栏，需要设置左按钮，右按钮和标题属性。这个组件将会获取两个属性：navigator和navState代表导航组件和它的状态。这个组件当ruote改变的时候会重新渲染；
configureScene function 可选的方法，你可以通过它配置页面切换的动画和手势。将会使用route和routeStack参数调用，route代表导航当前显示的页面，routeStack是导航当前展示的route集合；

Navigator使用

1，首先，创建2个组件（home、Temp）并初始化组件

代码如下：

home组件

import React, { Component } from ‘react‘;
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View
  } from ‘react-native‘;

  var Home = React.createClass( {
      render() {
          return (
              <View style={styles.container}>
                  <Text>点击跳转</Text>
              </View>
          );
      }
  });

  var styles = StyleSheet.create({
      container: {
          backgroundColor:‘yellow‘,
          flex:1,
          justifyContent:‘center‘,
          alignItems:‘center‘
      },
  });

  module.exports = Home;

temp组件

 import React, { Component } from ‘react‘;
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View
  } from ‘react-native‘;

  var Temp = React.createClass( {
      render() {
          return (
              <View style={styles.container}>
                  <Text>点击返回</Text>
              </View>
          );
      }
  });

  var styles = StyleSheet.create({
      container: {
          backgroundColor:‘yellow‘,
          flex:1,
          justifyContent:‘center‘,
          alignItems:‘center‘
      },
  });

  module.exports = Temp;

实例化 Navigator的属性：initialRoute 和 renderSence，它们的作用分别是告诉导航器需要渲染的场景、根据路由描述渲染出来。

      <Navigator
          style={{flex: 1}}        // 布局
          initialRoute={{
              name:‘Home‘,    // 名称
              component:Home  // 要跳转的板块
          }}

          renderScene={(route, navigator) => {    // 将板块生成具体的组件
                  let Component = route.component;    // 获取路由内的板块
                  return <Component {...route.params} navigator={navigator} />    // 根据板块生成具体组件
          }}
      />

项目实例

比如我们要实现两个页面的切换效果，当点击返回的时候可以返回之前的页面，如图所示：

要实现上面的效果，需要三个文件：第一个页面，第二个页面和一个控制跳转的JS。

导航控制页面，

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ‘react‘;
import Splash from ‘./src/widght/ProductList‘;

import {
  AppRegistry,
  StyleSheet,
  Platform,
  TouchableOpacity,
  Text,
  StatusBar,
  Navigator,
  ListView,
  Image,
  View
} from ‘react-native‘;

const defaultRoute = {
    component: Splash
};

export default class Demo extends Component {
  renderScene(route, navigator) {
        let Component = route.component;
        return (
            <Component {...route.params} navigator={navigator}/>
        );
    }

    renderNavBar() {
        var routeMapper = {
            LeftButton(route, navigator, index, navState) {//左边按钮
                if (index > 0) {
                    return (
                        <TouchableOpacity
                            onPress={() => navigator.pop()}//退栈
                            style={styles.button}>
                            <Image
                                style={styles.thumbnail}
                                source={require(‘./image/back_gray_icon.png‘)}
                            />
                        </TouchableOpacity>
                    );
                }
            },
            RightButton(route, navigator, index, navState) {//右边按钮

            },
            Title(route, navigator, index, navState) {//主标题
                return (
                    <View style={styles.title}>
                        <Text style={styles.buttonText}>{!route.title ? ‘商品列表‘ : ‘商品详情‘}</Text>
                    </View>
                );
            }
        };

        return (
            <Navigator.NavigationBar
                style={styles.navigationBarStyle}
                routeMapper={routeMapper}
            />
        );
    }

    render() {
        return (
            <Navigator
                initialRoute={defaultRoute}
                renderScene={this.renderScene}
                sceneStyle={{paddingTop: (Platform.OS === ‘android‘ ? 66 : 74)}}
                navigationBar={this.renderNavBar()}/>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#F5FCFF‘,
    },
    navigationBarStyle:{
      alignItems: ‘center‘,
      backgroundColor: ‘#FFFFFF‘,
      shadowOffset: {
          width: 1,
          height: 0.5,
      },
      shadowColor: ‘#999999‘,
      shadowOpacity: 0.2,
    },
    title: {
        flex: 1,
        alignItems: ‘center‘,
        justifyContent: ‘center‘,
        backgroundColor:‘#FFFFFF‘
    },
    button: {
        flex: 1,
        width: 50,
        alignItems: ‘center‘,
        justifyContent: ‘center‘
    },
    buttonText: {
        fontSize: 18,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        color: ‘#999999‘,
        fontWeight: ‘800‘
    },
    thumbnail: {
         width: 40,
         height: 40
     }
});

AppRegistry.registerComponent(‘Demo‘, () => Demo);

商品列表ProductList.js

/**
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ‘react‘;
import { View, Text,Image, StyleSheet,TouchableOpacity} from ‘react-native‘;
import ProductDetail from ‘./ProductDetail‘;

class ProductList extends Component {
  openPage() {
        this.props.navigator.push({
            title: ‘ProductDetail‘,
            component: ProductDetail
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.openPage.bind(this)}>
                    <Text style={styles.textStyle}>点我跳转第二个页面</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
          flex: 1,
          justifyContent: ‘center‘,
          alignItems: ‘center‘,
          backgroundColor: ‘#FFFFFF‘
    },
    textStyle: {
        fontSize: 20,
        color:‘#55ACEE‘,
        marginBottom: 8,
        textAlign: ‘left‘
    }

});

export default ProductList;

商品详情页面，ProductDetail.js

/**
 * https://github.com/facebook/react-native
 * @flow 闪屏页
 */

import React, { Component } from ‘react‘;
import { View, Text,Image, StyleSheet,TextInput,TouchableOpacity} from ‘react-native‘;

class ProductDetail extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.detail}>商品详情页</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#FFFFFF‘,
  },
  detail: {
    fontSize: 24,
    textAlign: ‘center‘,
  }
});

export default ProductDetail;

Navigator内置了很多动画跳转。如：

  • Navigator.SceneConfigs.PushFromRight 从右边进入
 (route, routeStack) => Navigator.SceneConfigs.FloatFromRight
  • Navigator.SceneConfigs.FloatFromLeft 从左边进入
  (route, routeStack) => Navigator.SceneConfigs.FloatFromLeft
  • Navigator.SceneConfigs.FloatFromBottom 从底部进入
  • Navigator.SceneConfigs.FloatFromBottomAndroid
  (route, routeStack) => Navigator.SceneConfigs.FloatFromBottom
  • Navigator.SceneConfigs.FadeAndroid Android飞入效果
(route, routeStack) => Navigator.SceneConfigs.FadeAndroid
  • Navigator.SceneConfigs.HorizontalSwipeJump 水平跳入
 (route, routeStack) => Navigator.SceneConfigs.HorizontalSwipeJump

除此之外，还有很多动画效果，这里不再依依说明。

NavigatorIOS 属性

对于NavigatorIOS而言，主要有以下属性：

属性 说明
barTintColor 导航条的背景颜色
itemWrapperStyle 导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色
navigationBarHidden 布尔值，决定导航栏是否隐藏
shadowHidden 布尔值，决定是否要隐藏1像素的阴影
tintColor 导航栏上按钮的颜色
titleTextColor 导航器标题的文字颜色
translucent 布尔值，决定导航条是否半透明(注：当不半透明时页面会向下移动导航栏等高的距离,以防止内容被遮盖)
interactivePopGestureEnabled 决定是否启用滑动返回手势。不指定此属性时，手势会根据 navigationBar 的显隐情况决定是否启用（显示时启用手势，隐藏时禁用手势），指定此属性后，手势与 navigationBar 的显隐情况无关

NavigatorIOS常用方法

除了上面的属性之外，还有一些常用的方法：

push(route) 导航器跳转到一个新的路由

pop()返回到上一页

replace(route)替换当前页的路由，并立即加载新路由的视图

replacePreviousAndPop(route)替换上一页的路由/视图并且立即切换回上一页

resetTO(route)替换最顶级的路由并且回到它

replaceAtIndex替换指定路由

popToRoute(route)一直回到某个指定的路由

NavigatorIOS实例

和 Navigator 一样 NavigatorIOS 需要有个根视图来完成初始化，所以我们需要先创建一个组件来描述这个界面，并将这个组件通过路由的形式告诉 NavigatorIOS。

1，创建一个 Home 组件，用来作为 NavigatorIOS 的根视图

 var Home = React.createClass( {
      render() {
          return (
              <View style={styles.container}>
                     <Text>点击跳转页面</Text>
              </View>
          );
      }
  });
   var styles = StyleSheet.create({
      container: {
          // 背景颜色
          backgroundColor:‘yellow‘,
          flex:1,
          // 对齐方式
          justifyContent:‘center‘,
          alignItems:‘center‘
      },
  });

然后我们实例化一个 NavigatorIOS 并设置路由。

  var navigatorDemo = React.createClass( {
        render() {
          return (
              <NavigatorIOS
                  initialRoute={{
                      component: Home,    // 要跳转的页面
                      title:‘首页‘    // 跳转页面导航栏标题
                  }}
                  style={{flex:1}}  // 此项不设置,创建的导航控制器只能看见导航条而看不到界面
              />
          );
        }
  });

然后通过TouchableOpacity点击跳转。

左边返回按钮的样式：

initialRoute={{
         component: Home,    // 要跳转的页面
         title:‘首页‘,   // 跳转页面导航栏标题
         leftButtonTitle:‘左边‘,   // 实例化左边按钮
         onLeftButtonPress:() => {alert(‘左边‘)},  // 左边按钮点击事件
         rightButtonTitle:‘右边‘,  // 实例化右边按钮
         onRightButtonPress:() => {alert(‘右边‘)}  // 右边按钮点击事件
          }}

附：示例代码

时间： 2024-10-16 12:24:32

React-Native组件之 Navigator和NavigatorIOS的相关文章

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React

React Native组件生命周期

概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点.就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle). React Native组件的生命周期大致上可以划分为实例化阶段.存在阶段和销毁阶段.我们只有在理解组件生命周期的基础上,才能开发出高性能的app. React Native中组件的生命周期大致可以用以下图表示: 如图: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,

React Native组件之Switch和Picker和Slide

React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性如下: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * Switch 开关组件 Picker 选择器 和slide 进度条 */ import React, { C

React Native组件之ScrollView

React Native组件ScrollView类似于iOS中的UIScrollView.其使用方法和属性如下: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 ScrollView 的常用属性 * 2016-09-19 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text,

React Native 组件之TextInput

React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-16 * TextInput 常用属性 */ import React, { Component } from 'react'; import

Android React Native组件的生命周期

和Android一样,React的组件也有对应的生命周期.Android React Native组件的生命周期可以总的概括为下面这一张图. 可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作. 生命周期回调函数总共有10个. obje

React Native组件的结构和生命周期

React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导入组件 1.2 导入API 1.3 导入自定义组件 2.组件的声明 组件的生命分为组件的定义和样式.组件的定义有各种组件的组成结构.方法的定义. 2.1 组件的定义 2.2 组件样式 组件样式的定义可以直接在组件的定义中的style中定义.但是对于样式复杂的组件需要组件样式. 3.组件的注册或导出

React Native组件之ScrollView 和 StatusBar和TabBarIos

React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 ScrollView 的常用属性 * 2016-09-19 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet,

React Native 组件之Image

Image组件类似于iOS中UIImage控件,该组件可以通过多种方式加载图片资源. 使用方式,加载方式有如下几种: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 * image 加载的三种方式+设置图片的内容模式 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, I