Fork me on GitHub

React Native之导航组件NavigatorIOS和Navigator

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

Navigator.png

常用属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//样式, 必须设置{flex:1}, 否则看不到子控件
style={{flex:1}}

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

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

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

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

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

//导航栏是否是半透明的,true/false。
translucent={true}
  • 必须初始化路由: initialRoute{}
  • 注意:component,需要传入组件,自定义组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//用于初始化路由。其参数对象中的各个属性如下:
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, //右侧按钮点击事件
}
  • 使用示例
1
2
3
4
5
6
7
8
9
10
<NavigatorIOS initialRoute={
{
//JunNavigatorView: 为自定义的组件
component:JunNavigatorView,
title: '首页',
leftButtonTitle:'左按钮',
rightButtonTitle:'跳转'
}
}
/>

页面间的跳转

  • 获取Navigator,只有它才能跳转
  • 只要是导航控制器下的组件,都可以通过props获取
  • this.props.navigator
  • 界面跳转方法
1
2
3
4
5
6
7
pust(route)://加载一个新的页面(视图或者路由)并且路由到该页面。
pop()://返回到上一个页面。
popN(n)://一次性返回N个页面。当 N=1 时,相当于 pop() 方法的效果。
replace(route)://替换当前的路由。
replacePrevious(route)://替换前一个页面的视图并且回退过去。
resetTo(route)://取代最顶层的路由并且回退过去。
popToTop()://回到最上层视图。
  • 使用示例
1
2
3
4
5
6
7
8
<Text onPress={()=>{
this.props.navigator.push({
component:JunTwoView,
title:'第二页面'
})

}}
>点击跳转到第二个页面</Text>
  • Navigator很好解决了NavigatorIOS不能跨平台和自定义的问题
  • RN开发中通常使用Navigator
  • Navigator作用:只提供跳转功能,支持iOS,安卓
  • 导航条需要自定义,需要导航条的界面,自己添加
    只要一个控件,包装成Navigator就能获取跳转功能
  • 在0,43版本之前(包括0.43), Navigatorreact-native库中
  • 从0.44版本开始Navigator就被移入了react-native-deprecated-custom-components库中
  • 使用前,先进入当前项目文件,安装Navigator所在的库
1
2
3
4
5
//终端输入
yarn add react-native-deprecated-custom-components

//下面方法可能已经失效(亲测失败)
npm install react-native-deprecated-custom-components --save
  • 下载完成后,导入
    1
    import {Navigator} from 'react-native-deprecated-custom-components'

initialRoute:初始化路由

  • 定义启动时加载的路由
  • 路由是导航栏用来识别渲染场景的一个对象
1
<Navigator initialRoute={{component: JunOneView}}/>

配置场景动画和手势

  • 可选的函数, 设置跳转方向
  • 会带有两个参数调用,一个是当前的路由,一个是当前的路由栈
  • 返回一个场景配置对象
1
2
3
_configureScene(route, routeStack) {
return Navigator.SceneConfigs.PushFromLeft;
}
  • 其他跳转方向参数
1
2
3
4
5
6
7
8
9
10
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

渲染指定路由的场景

  • 必要参数, 调用的参数是路由和导航器
1
2
3
4
_renderScene(route, navigator) {
// ...扩展符, 作用:如果是对象,就获取对象中所有值,如果是数组,就获取数组中所有值
return (<route.component navigator={navigator} {... route.props}/>)
}

设置导航尺寸

1
style={{flex:1}}

其他属性或方法

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

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

延展符

  • 文中用到了一个操作符: ...即为延展符
  • 延展符的作用
    • 遍历数组
    • 遍历对象的属性,一个一个传值给下一个控件
1
2
3
4
5
6
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只能作用于数组
1
2
3
4
5
6
7
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

-------------本文结束感谢您的阅读-------------
欢迎您扫一扫下面的微信公众号,订阅我的博客!
TitanKing wechat
坚持原创技术分享,您的支持将鼓励我继续创作!
分享到:
0%