已解决：
首先明确一点RN0.55.4引用react-native-vector-icons/Ionicons不需要做类似官网提示的那些复杂操作，通过一步步对比可以发现RN已经帮你做好。问题出在：TabNavigator 组件需要设置TabNavigator的位置tabBarPosition: 'bottom'，以及是否显示图标，默认关闭showIcon: true。还有就是icon图标名称需要使用正确
代码如下：
import{TabNavigator}from'react-navigation'import{createBottomTabNavigator}from'react-navigation';importPage1from'../pages/Page1'importPage2from'../pages/Page2'importPage3from'../pages/Page3'importReactfrom'react';import{Button,Image}from'react-native'importIoniconsfrom'react-native-vector-icons/Ionicons'exportconstAppTabNavigator=TabNavigator({Page1:{screen:Page1,navigationOptions:{tabBarLabel:'Page1',tabBarIcon:({tintColor,focused})=>(),////显示的图片//tabBarIcon:({tintColor})=>(////),}},Page2:{screen:Page2,navigationOptions:{tabBarLabel:'Page2',tabBarIcon:({tintColor,focused})=>()//tabBarIcon:({tintColor})=>(////),}},Page3:{screen:Page3,navigationOptions:{tabBarLabel:'Page3',tabBarIcon:({tintColor,focused})=>()//tabBarIcon:({tintColor})=>(////),}}},{//设置TabNavigator的位置tabBarPosition:'bottom',//设置Tab标签的属性tabBarOptions:{//Android属性upperCaseLabel:false,//是否使标签大写，默认为true//共有属性showIcon:true,//是否显示图标，默认关闭showLabel:true,//是否显示label，默认开启activeTintColor:'#EB3695',//label和icon的前景色活跃状态下（选中）inactiveTintColor:'gray',//label和icon的前景色活跃状态下（未选中）style:{//TabNavigator的背景颜色backgroundColor:'white',height:55,},indicatorStyle:{//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题height:0,},labelStyle:{//文字的样式fontSize:13,marginTop:-5,marginBottom:5,},iconStyle:{//图标的样式marginBottom:5,}},});效果如下：
友情提示：
运行会报警告warning Method 'jumpToIndex' is deprecated. Please upgrade your code to use jumpTo instead 'Change your code from 'jumpToIndex(1)' to 'jumpTo('...')
原因：TabNavigator已经被遗弃了，使用createBottomTabNavigator或者createMaterialTopTabNavigator，对应的标签栏位置。
以下代码使用最新的createBottomTabNavigator组件，该组件不需要再对其进行位置和图标是否显示的属性设置，非常简单（推荐使用）
import{createBottomTabNavigator}from'react-navigation';//importHomePagefrom'../pages/HomePage'importPage1from'../pages/Page1'importPage2from'../pages/Page2'importPage3from'../pages/Page3'importReactfrom'react';import{Button,Image}from'react-native'importIoniconsfrom'react-native-vector-icons/Ionicons'exportconstAppTabNavigator=createBottomTabNavigator({Page1:{screen:Page1,navigationOptions:{tabBarLabel:'Page1',tabBarIcon:({tintColor,focused})=>(),////显示的图片//tabBarIcon:({tintColor})=>(////),}},Page2:{screen:Page2,navigationOptions:{tabBarLabel:'Page2',tabBarIcon:({tintColor,focused})=>()//tabBarIcon:({tintColor})=>(////),}},Page3:{screen:Page3,navigationOptions:{tabBarLabel:'Page3',tabBarIcon:({tintColor,focused})=>()//tabBarIcon:({tintColor})=>(////),}}});效果如图：
|
微信访问
手机APP
