代碼如下：import?{TabNavigator}?from?'react-navigation'
import?HomePage?from?'../pages/HomePage'
import?Page1?from?'../pages/Page1'import?Page2?from?'../pages/Page2'
import?Page3?from?'../pages/Page3'import?React?from?'react';
import?{Button}?from?'react-native'
import?Ionicons?from?'react-native-vector-icons/Ionicons'
export?const?AppTabNavigator?=?TabNavigator({
????Page1:{
????????screen:Page1,
????????navigationOptions:?{
????????????tabBarLabel:?'Page1',
????????????tabBarIcon:?({?tintColor,?focused?})?=>?(
??????????????<Ionicons
????????????????name={focused???'ios-home'?:?'ios-home-outline'}
????????????????size={26}
????????????????style={{?color:?tintColor?}}
??????????????/>
????????????),
????????}?????
????},
????Page2:{
????????screen:Page2,
????????navigationOptions:{
????????????tabBarLabel:'Page2',
????????????tabBarIcon:({tintColor,focused})?=>(
????????????????<Ionicons
????????????????????name={focused?'ios-people':'ios-people-outline'}
????????????????????size={26}
????????????????????style={{color:tintColor}}
????????????????/>
????????????)
????????}
????},
????Page3:{
????????screen:Page3,
????????navigationOptions:{
????????????tabBarLabel:'Page3',
????????????tabBarIcon:({tintColor,focused})?=>(
????????????????<Ionicons
????????????????????name={focused?'ios-chatboxes':'ios-chatboxes-outline'}
????????????????????size={26}
????????????????????style={{color:tintColor}}
????????????????/>
????????????)
????????}
????}
});在安卓模擬器目前效果：RN版本是0.55.4的，嘗試百度搜索，按照官網(wǎng)說明也也同樣沒效果，地址：https://github.com/oblador/react-native-vector-icons問題：1.圖標(biāo)沒顯示出來；2.TabNavigator為啥不是顯示到最低端而是跑到頂端了
1 回答
努力奔跑的自己
TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超0個贊
已解決：
首先明確一點(diǎn)RN0.55.4引用react-native-vector-icons/Ionicons不需要做類似官網(wǎng)提示的那些復(fù)雜操作，通過一步步對比可以發(fā)現(xiàn)RN已經(jīng)幫你做好。問題出在：TabNavigator 組件需要設(shè)置TabNavigator的位置tabBarPosition: 'bottom'，以及是否顯示圖標(biāo)，默認(rèn)關(guān)閉showIcon: true。還有就是icon圖標(biāo)名稱需要使用正確
代碼如下：
import?{TabNavigator}?from?'react-navigation'
import?{?createBottomTabNavigator?}?from?'react-navigation';
import?Page1?from?'../pages/Page1'
import?Page2?from?'../pages/Page2'
import?Page3?from?'../pages/Page3'
import?React?from?'react';i
mport?{Button,Image}?from?'react-native'
import?Ionicons?from?'react-native-vector-icons/Ionicons'
export?const?AppTabNavigator?=?TabNavigator({
????Page1:{
????????screen:Page1,
????????navigationOptions:?{
????????????tabBarLabel:?'Page1',
????????????tabBarIcon:?({?tintColor,?focused?})?=>?(
??????????????<Ionicons
????????????????name={focused???'ios-add'?:?'ios-add-circle'}
????????????????size={26}
????????????????style={{?color:?tintColor?}}
??????????????/>
????????????),????????????//?//顯示的圖片
????????????//?tabBarIcon:?({tintColor})?=>?(
????????????//?????<Image
????????????//?????????source={require('../images/ic_home.png')}
????????????//?????????style={[{height:?24,?width:?24},?{tintColor:?tintColor}]}
????????????//?????/>
????????????//?),
????????}?????
????},
????Page2:{
????????screen:Page2,
????????navigationOptions:{
????????????tabBarLabel:'Page2',
????????????tabBarIcon:({tintColor,focused})?=>(
????????????????<Ionicons
????????????????????name={focused???'ios-add'?:?'ios-add-circle'}
????????????????????size={26}
????????????????????style={{?color:?tintColor?}}
????????????????/>
????????????)????????????//?tabBarIcon:?({tintColor})?=>?(
????????????//?????<Image
????????????//?????????source={require('../images/ic_shop_car.png')}
????????????//?????????style={[{height:?24,?width:?24},?{tintColor:?tintColor}]}/>
????????????//?),
????????}
????},
????Page3:{
????????screen:Page3,
????????navigationOptions:{
????????????tabBarLabel:'Page3',
????????????tabBarIcon:({tintColor,focused})?=>(
????????????????<Ionicons
????????????????????name={focused???'ios-add'?:?'ios-add-circle'}
????????????????????size={26}
????????????????????style={{?color:?tintColor?}}
????????????????/>
????????????)????????????//?tabBarIcon:?({tintColor})?=>?(
????????????//?????<Image
????????????//?????????source={require('../images/ic_type.png')}
????????????//?????????style={[{height:?24,?width:?24},?{tintColor:?tintColor}]}/>
????????????//?),
????????}
????}
},{????//設(shè)置TabNavigator的位置
????tabBarPosition:?'bottom',????//設(shè)置Tab標(biāo)簽的屬性
????tabBarOptions:?{????????//Android屬性
????????upperCaseLabel:?false,//是否使標(biāo)簽大寫，默認(rèn)為true
????????//共有屬性
????????showIcon:?true,//是否顯示圖標(biāo)，默認(rèn)關(guān)閉
????????showLabel:?true,//是否顯示label，默認(rèn)開啟
????????activeTintColor:?'#EB3695',//label和icon的前景色?活躍狀態(tài)下（選中）
????????inactiveTintColor:?'gray',//label和icon的前景色?活躍狀態(tài)下（未選中）
????????style:?{?//TabNavigator?的背景顏色
????????????backgroundColor:?'white',
????????????height:?55,
????????},
????????indicatorStyle:?{//標(biāo)簽指示器的樣式對象（選項(xiàng)卡底部的行）。安卓底部會多出一條線，可以將height設(shè)置為0來暫時解決這個問題
????????????height:?0,
????????},
????????labelStyle:?{//文字的樣式
????????????fontSize:?13,
????????????marginTop:?-5,
????????????marginBottom:?5,
????????},
????????iconStyle:?{//圖標(biāo)的樣式
????????????marginBottom:?5,
????????}
????},
});效果如下：
友情提示：
運(yùn)行會報(bào)警告warning Method 'jumpToIndex' is deprecated. Please upgrade your code to use jumpTo instead 'Change your code from 'jumpToIndex(1)' to 'jumpTo('...')
原因：TabNavigator已經(jīng)被遺棄了，使用createBottomTabNavigator或者createMaterialTopTabNavigator，對應(yīng)的標(biāo)簽欄位置。
以下代碼使用最新的createBottomTabNavigator組件，該組件不需要再對其進(jìn)行位置和圖標(biāo)是否顯示的屬性設(shè)置，非常簡單（推薦使用）
import?{?createBottomTabNavigator?}?from?'react-navigation';
//?import?HomePage?from?'../pages/HomePage'
import?Page1?from?'../pages/Page1'
import?Page2?from?'../pages/Page2'
import?Page3?from?'../pages/Page3'
import?React?from?'react';
import?{Button,Image}?from?'react-native'
import?Ionicons?from?'react-native-vector-icons/Ionicons'
export?const?AppTabNavigator?=?createBottomTabNavigator({
????Page1:{
????????screen:Page1,
????????navigationOptions:?{
????????????tabBarLabel:?'Page1',
????????????tabBarIcon:?({?tintColor,?focused?})?=>?(
??????????????<Ionicons
????????????????name={focused???'ios-add'?:?'ios-add-circle'}
????????????????size={26}
????????????????style={{?color:?tintColor?}}
??????????????/>
????????????),
????????????//?//顯示的圖片
????????????//?tabBarIcon:?({tintColor})?=>?(
????????????//?????<Image
????????????//?????????source={require('../images/ic_home.png')}
????????????//?????????style={[{height:?24,?width:?24},?{tintColor:?tintColor}]}
????????????//?????/>
????????????//?),
????????}?????
????},
????Page2:{
????????screen:Page2,
????????navigationOptions:{
????????????tabBarLabel:'Page2',
????????????tabBarIcon:({tintColor,focused})?=>(
????????????????<Ionicons
????????????????????name={focused???'ios-add'?:?'ios-add-circle'}
????????????????????size={26}
????????????????????style={{?color:?tintColor?}}
????????????????/>
????????????)
????????????//?tabBarIcon:?({tintColor})?=>?(
????????????//?????<Image
????????????//?????????source={require('../images/ic_shop_car.png')}
????????????//?????????style={[{height:?24,?width:?24},?{tintColor:?tintColor}]}/>
????????????//?),
????????}
????},
????Page3:{
????????screen:Page3,
????????navigationOptions:{
????????????tabBarLabel:'Page3',
????????????tabBarIcon:({tintColor,focused})?=>(
????????????????<Ionicons
????????????????????name={focused???'ios-add'?:?'ios-add-circle'}
????????????????????size={26}
????????????????????style={{?color:?tintColor?}}
????????????????/>
????????????)
????????????//?tabBarIcon:?({tintColor})?=>?(
????????????//?????<Image
????????????//?????????source={require('../images/ic_type.png')}
????????????//?????????style={[{height:?24,?width:?24},?{tintColor:?tintColor}]}/>
????????????//?),
????????}
????}
});效果如圖：
添加回答
舉報(bào)
0/150
提交
取消