在react-navigation推出之前,项目一直是用的navigator作为路由,在ios上跑的还是比较顺利,但是在android上却显得非常卡顿,虽然做了诸多优化,也还是不能达到类似原生的流畅,在学习react-navigation途中遇到的问题,及常见操作给各位作个分享,帮助初来乍到的rn学者更快使用,文档点这里,目前貌似只有英文文档,
接下来,我们可以快速的构建自己的导航框架了,首先是添加依赖
yarn add react-navigation
或者
npm install –save react-navigation
接下来在我们的统一的入口组件,如app.js,代码如下:
import {
StackNavigator,
TabNavigator,
} from 'react-navigation'
const HomeNavigator = TabNavigator(
{
Home: {screen: Home},
Classify: {screen: Classify},
Shopcar: {screen: Shopcar},
Mine: {screen: Mine},
},
{
tabBarComponent: TabView.TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazyLoad: true,
tabBarOptions: {
activeTintColor: '#e91e63',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 12,
},
}
},
)
const AppNavigator = StackNavigator(
{
Main: {screen: HomeNavigator},
Login: {screen: Login},
},
{
headerMode: 'screen', //Only works when headerMode is screen
mode: 'card',//定义渲染和转换的样式 card 使用标准的iOS和Android屏幕转换。这是默认值。 modal使屏幕从底部滑入,这是普通的iOS模式。只适用于iOS,对Android无影响。
navigationOptions: {
cardStack: {
gesturesEnabled: false, //是否可以使用手势关闭此屏幕。在iOS上默认为true,在Android上为false
},
},
},
);
export default class Main extends Component {
render() {
return (
<AppNavgator/> );
}
}
我们首先来看下运行效果:
基本可以实现app的导航需求,接下来我们看提供的属性
先看TabNavigator的属性,
tabBarComponent 有两种可以选择,分别是TabView.TabBarTop 和TabView.TabBarBottom ,需要知道的是android默认是第一种,ios默认是第二种,如果需要统一,需要设置,
tabBarPosition //是导航条的位置,’top’ 或者 ‘bottom’
swipeEnabled: false, //是否支持滑动
animationEnabled: false, //导航切换是否附带动画
lazyLoad: true, //是否需要懒加载
tabBarOptions: {
activeTintColor: ‘#e91e63’, //点击时的颜色
inactiveTintColor: ‘gray’, //未被点击的颜色
labelStyle: {
fontSize: 12, // 字体大小
},
最后再加到StackNavigator即可,StackNavigator的属性上面都有注释,很好理解,需要注意的是新加的页面都需要再StackNavigator里声明,接下来看跳转及传参:
this.props.navigation.navigate('yourScreen', { params: yourparams })
接收参数:
this.props.navigation.state.params.params
接下来看下标签栏的属性:
static navigationOptions = {
header: {
style: {backgroundColor: '#E43F47'}, //标签栏样式
title: '我的', //标签栏文字,返回一个字符串
tintColor: 'white' //文字颜色
},
tabBar: { //导航栏配置
label: '我的',
icon: ({focused, tintColor}) => (
<Image
style={[styles.icon,{tintColor: tintColor}]}
source={require('../../img/main/navigator/mime_nomal.png')}
/>
),
},
}
基本功能大致实现,如想实现更多个性或自定义效果,请看下篇介绍