ReactNative之导航（十）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

NavigatorIOS组件

• 什么是导航，本质就是视图之间界面的跳转，比如首页跳转到详情页。
• NavigatorIOS作用：用来iOS上界面之间的跳转。

常用属性

barTintColor : 导航条的背景颜色
navigationBarHidden : 为true , 隐藏导航栏。
shadowHidden : 是否隐藏阴影，true／false。
tintColor : 导航栏上按钮的颜色设置。
titleTextColor : 导航栏上字体的颜色 。
translucent : 导航栏是否是半透明的，true／false。

NavigatorIOS使用步骤

• 1.初始化路由
  • 注意:component，需要传入组件，自定义组件
  • NavigatorIOS上的按钮图片，默认会被渲染成蓝色
  • NavigatorIOS上的按钮，只能放一张图片
  • 注意：导航一定要有尺寸，flex:1，否则看不到子控件

initialRoute：用于初始化路由。其参数对象中的各个属性如下：
 {
  component: function, //加载的视图组件
  title: string, //当前视图的标题
  passPros: object, //传递的数据
  backButtonIcon: Image.propTypes.source, // 后退按钮图标
  backButtonTitle: string, //后退按钮标题
  leftButtonIcon: Image.propTypes.soruce, // 左侧按钮图标
  leftButtonTitle: string, //左侧按钮标题
  onLeftButtonPress: function, //左侧按钮点击事件
  rightButtonIcon: Image.propTypes.soruce, // 右侧按钮图标
  rightButtonTitle: string, //右侧按钮标题
  onRightButtonPress: function, //右侧按钮点击事件
}

• 使用

<NavigatorIOS
                style={{flex:1,backgroundColor:'blue'}}
                initialRoute={{
                    component: HomeView,
                    title: '首页',
                    leftButtonIcon:{uri'navigationbar_friendattention'},
                }}
            />

• 2.获取Navigator，只有它才能跳转
  • 只要是导航控制器下的组件，都可以通过props获取

this.props.navigator

• 3.跳转界面

• 方法

（1）pust(route)：加载一个新的页面（视图或者路由）并且路由到该页面。
（2）pop()：返回到上一个页面。
（3）popN(n)：一次性返回N个页面。当 N=1 时，相当于 pop() 方法的效果。
（4）replace(route)：替换当前的路由。
（5）replacePrevious（route）：替换前一个页面的视图并且回退过去。
（6）resetTo(route)：取代最顶层的路由并且回退过去。
（7）popToTop()：回到最上层视图。

• 使用

  this.props.navigator.push({
        component:nextView,
        title:'第二页',
        passProps:{name:'xmg'},
    }

Navigator

• NavigatorIOS弊端：

  • 1.只能用于iOS,不能用于安卓
  • 2.导航条不能自定义

• Navigator很好解决了上面的问题,RN开发中通常使用它

• Navigator作用：只提供跳转功能，支持iOS,安卓

  • 注意：导航条需要自定义，需要导航条的界面，自己添加
  • 只要一个控件，包装成Navigator就能获取跳转功能

Navigator导入

• 在之前的版本可以直接导入

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Navigator

} from 'react-native';

• 但是最近的版本不行，Navigator被移入另外一个库了
• 直接导入，会报错

error.jpeg

• 解决,进入当前项目文件，安装Navigator所在的库

npm install react-native-deprecated-custom-components --save

• 安装好后，就能看到Navigator了

Navigator.jpeg

• 项目直接导入就行

import {Navigator} from 'react-native-deprecated-custom-components'

Navigator使用步骤

1.创建Navigator

    render() {
        return (
            <Navigator
                initialRoute={{component:HomeView}}
                configureScene={this._configureScene.bind(this)}
                renderScene={this._renderScene.bind(this)}
                style={{flex:1}}
            />

        )

    }

    // 配置场景跳转方向
    _configureScene(route, routeStack) {
        return Navigator.SceneConfigs.PushFromLeft;
    }

    // 生成组件,变量要用{}包住
    _renderScene(route, navigator) {

        
        // 把导航控制器传递给HomeView
        // ...route: 获取route中所有属性,传递给HomeView
        // ...扩展符, 作用:如果是对象,就获取对象中所有值,如果是数组,就获取数组中所有值
        // <route.component navigator={navigator} {...route}/> 类似下面写法，把route的属性取出来赋值
        // <route.component navigator={navigator} component=route.component/>
        return (<route.component navigator={navigator} {...route}/>)
    }

• 1.初始化路由: initialRoute
  • 设置初始化界面属性，描述一开始显示哪个组件

    initialRoute={{component:HomeView}}

• 2.配置场景: configureScene(route, routeStack)
  • 设置跳转方向

    _configureScene(route, routeStack) {
        return Navigator.SceneConfigs.PushFromLeft;
    }

• 3.渲染场景: renderScene(route, navigator)
  • 根据路由，生成组件

    // 生成组件,变量要用{}包住
    _renderScene(route, navigator) {

        // 类似<HomeView navigator={navigator} {...route.props}/>
        // 把导航控制器传递给HomeView
        // ...route.props: 获取route中所有属性,传递给HomeView
        // ...扩展符, 作用:如果是对象,就获取对象中所有值,如果是数组,就获取数组中所有值
        return (<route.component navigator={navigator} {... route.props}/>)
    }

• 4.设置导航尺寸

style={{flex:1}}

2.跳转界面

this.props.navigator.push({
                        component:nextView,
                        title:'首页',
                        passProps:{name:'xmg'},

                    }