前言
眼看很多公司都开始尝试使用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'},
}
