上一章节的底部tabbar，走了一些弯路。本文使用直路来完成同样的效果，只使用react-navigation就够了。
在这里我就直接上全部代码，并一一讲解：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
import React, { Component } from 'react'; import { StyleSheet, Text, Image } from 'react-native'; import { StackNavigator, TabNavigator } from 'react-navigation'; import HomeApp from './src/HomeScreen'; import { CartScreen } from './src/CartScreen'; import { ProfileScreen } from './src/ProfileScreen'; import { ItemScreen } from './src/ItemScreen'; export default class setup extends Component { constructor() { super(); } render() { return ( <AppTabNavigator></AppTabNavigator> ); } } const AppTabNavigator = TabNavigator( { HomeTab: { screen: HomeApp, navigationOptions: { tabBarLabel: '首页', tabBarIcon: ({ tintColor, focused }) => ( focused ? <Image source={require('./image/home-on.png')} style={[styles.icon]} /> : <Image source={require('./image/home-off.png')} style={[styles.icon]} /> ), } }, CartTab: { screen: CartScreen, navigationOptions: { tabBarLabel: '购物车', //文字 tabBarIcon: ({ tintColor, focused }) => ( //focused 图标 如果选中，图标显示，如果未选中，图标未显示 focused ? <Image source={{ uri:'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/cart-on.png'}} style={[styles.icon]} /> : <Image source={{ uri:'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/cart-off.png'}} style={[styles.icon]} /> ), } }, ProfileTab: { screen: ProfileScreen, navigationOptions: { tabBarLabel: '用户', tabBarIcon: ({ tintColor, focused }) => ( focused ? <Image source={{ uri: 'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/order-on.png' }} style={[styles.icon]} /> : <Image source={{ uri: 'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/order-off.png' }} style={[styles.icon]} /> ), } } }, { tabBarPosition: 'bottom',//tabbar显示在底部 initialRouteName: 'HomeTab',//初始化路由名称 animationEnabled: false, //切换页面时不显示动画 swipeEnabled: false, //禁止左右滑动 tabBarOptions: { showIcon: true,//android显示图标 indicatorStyle: { height: 0 },// android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？ style: { backgroundColor: 'white', //tabbar背景颜色 height: 60, }, labelStyle: { fontSize: 12, // 文字大小 }, activeTintColor: "red",//选中文字的颜色 inactiveTintColor: "#2E2E2E" //未选中文字的颜色 }, } ) const styles = StyleSheet.create({ icon: { width: 26, height: 26, }, }); |
首先我们要导入TabNavigator
|
1 2 3 4 |
import { StackNavigator, TabNavigator } from 'react-navigation'; |
其次创建TabNavigator（具体的功能我在代码中做了描述）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
const AppTabNavigator = TabNavigator( { HomeTab: { //路由名称 screen: HomeApp, //导入的页面 navigationOptions: { tabBarLabel: '首页', tabBarIcon: ({ tintColor, focused }) => ( focused ? <Image source={require('./image/home-on.png')} style={[styles.icon]} /> : <Image source={require('./image/home-off.png')} style={[styles.icon]} /> ), } }, CartTab: { screen: CartScreen, navigationOptions: { tabBarLabel: '购物车', //文字 tabBarIcon: ({ tintColor, focused }) => ( //focused 图标 如果选中，图标显示，如果未选中，图标未显示 focused ? <Image source={{ uri:'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/cart-on.png'}} style={[styles.icon]} /> : <Image source={{ uri:'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/cart-off.png'}} style={[styles.icon]} /> ), } }, ProfileTab: { screen: ProfileScreen, navigationOptions: { tabBarLabel: '用户', tabBarIcon: ({ tintColor, focused }) => ( focused ? <Image source={{ uri: 'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/order-on.png' }} style={[styles.icon]} /> : <Image source={{ uri: 'https://raw.githubusercontent.com/EastWorld/wechat-app-mall/master/images/nav/order-off.png' }} style={[styles.icon]} /> ), } } }, { tabBarPosition: 'bottom',//tabbar显示在底部 initialRouteName: 'HomeTab',//初始化路由名称 animationEnabled: false, //切换页面时不显示动画 swipeEnabled: false, //禁止左右滑动 tabBarOptions: { showIcon: true,//android显示图标 indicatorStyle: { height: 0 },// android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？ style: { backgroundColor: 'white', //tabbar背景颜色 height: 60, }, labelStyle: { fontSize: 12, // 文字大小 }, activeTintColor: "red",//选中文字的颜色 inactiveTintColor: "#2E2E2E" //未选中文字的颜色 }, } ) |
最后一步：
|
1 2 3 4 5 6 |
render() { return ( <AppTabNavigator></AppTabNavigator> ); |
渲染刚刚创建的TabNavigator。完成了
