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的一些简单语法, 大部分内容总结自袁大神的文章
Navigator.png
一. 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, //右侧按钮点击事件
}
- 使用示例
3. 页面间的跳转
- 获取Navigator，只有它才能跳转
- 只要是导航控制器下的组件，都可以通过props获取
this.props.navigator- 界面跳转方法
pust(route)：//加载一个新的页面（视图或者路由）并且路由到该页面。
pop()：//返回到上一个页面。
popN(n)：//一次性返回N个页面。当 N=1 时，相当于 pop() 方法的效果。
replace(route)：//替换当前的路由。
replacePrevious（route）：//替换前一个页面的视图并且回退过去。
resetTo(route)：//取代最顶层的路由并且回退过去。
popToTop()：//回到最上层视图。
- 使用示例
{
this.props.navigator.push({
component:JunTwoView,
title:'第二页面'
})
}}
>点击跳转到第二个页面
二. 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： 初始化路由
- 定义启动时加载的路由
- 路由是导航栏用来识别渲染场景的一个对象
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 (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