react-navigation
准确的说不是一个官方推出的库, 但是一经推出, 就受到了广大开发者的喜爱, 官方也废弃了自己曾经的导航库 navigator
, 转而在官方文档上推荐这个第三方. 传送门
接下来通过一个例子, 主要来说一下createStackNavigator
和 createBottomTabNavigator
的实际用法.
1.安装
在项目文件夹目录下, 输入命令行:
npm install react-navigation --save
或者
yarn add react-navigation
2. 创建底部 TabBar
这个操作就相当于在 iOS
里的 TabBarController
的操作, 在这里可以设定 tabbarItem 的图片和文字, 可以绑定每个 tabbarItem 所对应的页面. 具体代码如下:
import React, { Component } from 'react';
import {
StyleSheet,
Dimensions,
Image,
Platform
} from 'react-native';
import {
createBottomTabNavigator
} from 'react-navigation';
import color from '../../macro/color';
import Main from '../main/main';
import Discovery from '../discovery/discovery';
import Mine from '../mine/mine';
export default Tab = createBottomTabNavigator(
{
Main: {
screen: Main,
navigationOptions: {
tabBarPosition: 'bottom',
tabBarLabel: '首页',
showLabel: true,
tabBarIcon:({tintColor, focused}) => (
<Image style={styles.tabBarIconMain} source={focused ? require('../../image/tabbar/main-select.png') : require('../../image/tabbar/main.png')} />
),
}
},
Discovery: {
screen: Discovery,
navigationOptions: {
tabBarPosition: 'bottom',
tabBarLabel: '发现',
showLabel: true,
tabBarIcon:({tintColor, focused}) => (
<Image style={styles.tabBarIconDiscovery} source={focused ? require('../../image/tabbar/discivery-select.png') : require('../../image/tabbar/discovery.png')} />
),
}
},
Mine: {
screen: Mine,
navigationOptions: {
tabBarPosition: 'bottom',
tabBarLabel: '我的',
showLabel: true,
tabBarIcon:({tintColor, focused}) => (
<Image style={styles.tabBarIconMine} source={focused ? require('../../image/tabbar/mine-select.png') : require('../../image/tabbar/mine.png')} />
),
}
},
}, {
tabBarOptions: {
activeTintColor: color.tabbar_active,
inactiveTintColor: color.tabbar_inactive,
},
animationEnabled: true,//切换页面时是否有动画
swipeEnabled: false,//是否可滑动切换页面
initialRouteName: 'Main',//默认页面
tabBarOptions: {
indicatorStyle: {
height: 0,
},
labelStyle: {
fontSize: 11,
},
style: {
borderTopColor: '#ebebeb',
borderWidth: 0,
backgroundColor: 'white',
height: Dimensions.get('window').height*0.08,
}
}
}
)
const styles = StyleSheet.create({
tabBarIconMain: {
width: 19,
height: 18,
},
tabBarIconDiscovery: {
width: 25,
height: 18.5,
},
tabBarIconMine: {
width: 17,
height: 18.5,
}
});
可设置的属性是不止这些的, 有兴趣的童鞋可以自行增删改.
3. 添加导航
具体代码:
import React, {
Component
} from 'react';
import {
createStackNavigator
} from 'react-navigation';
import Tab from './bottomTab';
import SettingPage from '../mine/settings';
import AppointmentPage from '../mine/appointment';
import CollectPage from '../mine/collect';
import OrderPage from '../mine/order';
import PointPage from '../mine/point';
import PromotionPage from '../mine/promotion';
import MainPage from '../main/main';
const HomeStack = createStackNavigator(
{
Tab: {
screen: Tab,
navigationOptions: ({navigation}) => ({
header: null//如果不给页面添加导航栏, header 一定要置为 null
})
},
MainPage: {screen: MainPage},
SettingPage: {screen: SettingPage},
AppointmentPage: {screen: AppointmentPage},
CollectPage: {screen: CollectPage},
OrderPage: {screen: OrderPage},
PointPage: {screen: PointPage},
PromotionPage: {screen: PromotionPage},
},{
initialRouteName: 'Tab',
headerMode: 'screen'
}
)
export default class root extends Component {
render() {
return (
<HomeStack />
)
}
}
注意: 如果不给页面添加导航栏, 一定要将 header 置为 null
另外, 给单独的页面设置导航栏时, 可以在上面的代码位置中设置, 也可以在具体的页面中设置. 在具体的页面中设置示例代码:
export default class OrderPage extends Component {
static navigationOptions = {
title: '标题',
headerStyle: {
backgroundColor: color.white,
},
headerTitleStyle: {
fontSize: px2dp(18),
color: color.color333,
fontWeight: 'normal',
},
};
render() {
return (
<Text>hello</Text>
)
}
}
4. 入口
最重要的一步, 就是在 index.js
文件中设置应用入口.
import Root from './pages/base/rootPage'
AppRegistry.registerComponent('RN_inet', () => Root);
到这里基本上就可以完整的搭建一个带有导航栏和 tabbar 的项目框架了.
我也是刚刚学习 RN的小白, 倘有不对之处, 还请指正! 这是交流群哦 : 860196537