React Native之导航组件NavigatorIOS和Navigator

React Native之导航组件NavigatorIOS和Navigator

ReactNaive相关文章

1. React Native 中文网

2. GitHub相关代码地址

3. ReactNaive之CSS和Flex布局

4. ReactNative之基本组件

5. React Naive之ScrollView和ListView

6. React Native之导航组件NavigatorIOS和Navigator

7. ReactNative之TabBariOS和TabNavigator

---

注: 本文主要总结的是ReactNative的一些简单语法, 大部分内容总结自袁大神的文章

一. NavigatorIOS

• NavigatorIOS是一个包装UINavigationController，能够实现一个导航堆栈, 且只能在iOS上使用的组件
• 它的工作原理与使用本地应用程序UINavigationController的效果完全相同，从UIKIt提供相同的动画和行为

1. 常用属性

//样式, 必须设置{flex:1}, 否则看不到子控件
style={{flex:1}}

//导航条的背景颜色
barTintColor='yellow'

//为true , 隐藏导航栏
navigationBarHidden={false}

//是否隐藏阴影，true／false。
shadowHidden={false}

//导航栏上按钮的颜色设置
tintColor='black'

//导航栏上标题的颜色设置
titleTextColor='blue'

//导航栏是否是半透明的，true／false。
translucent={true}

2. NavigatorIOS的使用

• 必须初始化路由: initialRoute{}
• 注意:component，需要传入组件，自定义组件

//用于初始化路由。其参数对象中的各个属性如下：
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 initialRoute={
        {
        //JunNavigatorView: 为自定义的组件
            component:JunNavigatorView,
            title: '首页',
            leftButtonTitle:'左按钮',
            rightButtonTitle:'跳转'
        }
    }
/>

3. 页面间的跳转

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

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

• 使用示例

    <Text onPress={()=>{
        this.props.navigator.push({
            component:JunTwoView,
            title:'第二页面'
        })

    }}
    >点击跳转到第二个页面</Text>

二. Navigator

• Navigator很好解决了NavigatorIOS不能跨平台和自定义的问题
• RN开发中通常使用Navigator
• Navigator作用：只提供跳转功能，支持iOS,安卓
• 导航条需要自定义，需要导航条的界面，自己添加
  只要一个控件，包装成Navigator就能获取跳转功能

1. Navigator导入问题

• 在0,43版本之前(包括0.43), Navigator在react-native库中
• 从0.44版本开始Navigator就被移入了react-native-deprecated-custom-components库中
• 使用前,先进入当前项目文件，安装Navigator所在的库

//终端输入
yarn add react-native-deprecated-custom-components

//下面方法可能已经失效(亲测失败)
npm install react-native-deprecated-custom-components --save

• 下载完成后，导入

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

2. Navigator的使用

2-1. initialRoute： 初始化路由

• 定义启动时加载的路由
• 路由是导航栏用来识别渲染场景的一个对象

<Navigator initialRoute={{component: JunOneView}}/>

2-2. 配置场景动画和手势

• 可选的函数, 设置跳转方向
• 会带有两个参数调用，一个是当前的路由，一个是当前的路由栈
• 返回一个场景配置对象

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

• 其他跳转方向参数

Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

2-3. 渲染指定路由的场景

• 必要参数, 调用的参数是路由和导航器

_renderScene(route, navigator) {
        // ...扩展符, 作用:如果是对象,就获取对象中所有值,如果是数组,就获取数组中所有值
    return (<route.component navigator={navigator} {... route.props}/>)
}

2-4. 设置导航尺寸

style={{flex:1}}

3. 其他属性或方法

onDidFocus function 
//每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由。

onWillFocus function 
//会在导航切换之前调用，参数为目标路由。

三. 延展符

• 文中用到了一个操作符: ...即为延展符
• 延展符的作用
  
  • 遍历数组
  • 遍历对象的属性,一个一个传值给下一个控件

var arr1 = [1, 2, 3, 4, 5]
var arr2 = [0]

arr2.push(...arr1)
console.log(arr2)
//输出结果: [0, 1, 2, 3, 4, 5]

• 作用等同于JavaScript数组中的concat方法
• 区别在于concat只能作用于数组

var arr1 = [1, 2, 3, 4, 5]
var arr2 = [0]

// arr2.push(...arr1)
arr2 = arr2.concat(arr1)
console.log(arr2)
//输出结果: [0, 1, 2, 3, 4, 5]

关于JavaScript的数组语法, 请查看我的另一篇文章JavaScript基本语法01