1
A
回答
1
,如果你是使用反應母語矢量圖標是非常容易,只需創建一個像我下面創建的,您要使用的圖標的所有名稱,如果你在一個數組想要使用圖像,那麼你將不得不使用圖像鏈接,因爲我最後一次檢查反應原生不會讓你動態加載靜態資產。
效益使用圖標尤其反應天然載體圖標的:
- 訪問圖標集的噸。
- 樣式基於它的焦點與否。
- ....和其他我不記得的東西。
`
.....
import Icon from 'react-native-vector-icons/Ionicons';
const styles = {
body: {
backgroundColor: '#3b4147',
height: 60,
},
tabWrapper: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: 50,
},
tabInnerWrapper: {
marginRight: 12,
marginLeft: 12,
justifyContent: 'center',
alignItems: 'center',
},
textStyle: {
fontSize: 12,
color: '#62666b',
},
focusTextStyle: {
fontSize: 12,
color: '#acafb1',
},
};
const {body, tabWrapper, tabInnerWrapper, textStyle, focusTextStyle} = styles;
const focusIconColor = '#acafb1';
const iconColor = '#62666b';
const IconNames = ['ios-compass-outline', 'ios-cut-outline', 'ios-chatboxes-outline'];
const IconNamesFocus = ['ios-compass', 'ios-cut', 'ios-chatboxes'];
const CustomTabBar = ({ navigation: { state, navigate }}) => {
const { routes } = state;
return (
<View style={body}>
<View style={tabWrapper}>
{routes && routes.map((route, index) => {
const focused = index === state.index;
return (
<TouchableOpacity
key={route.key}
onPress={() => navigate(route.routeName)}
style={tabInnerWrapper}
>
<Icon
name={focused ? IconNamesFocus[index] : IconNames[index]}
size={25}
color={focused ? focusIconColor : iconColor}
/>
<Text style={focused ? focusTextStyle : textStyle}>
{route.routeName}
</Text>
</TouchableOpacity>
);
})}
</View>
</View>
);
};
`
+0
ty!..這就是我一直在尋找:) –
+0
另外,我在哪裏放置Layoutanimation線動畫焦點圖標? –
相關問題
- 1. 自定義Backstage視圖選項卡像標準選項卡FileNew
- 2. jquery-ui選項卡 - 添加選項卡
- 3. 如何清除舊選項卡並在選項卡上添加新選項卡
- 4. 在JTabbedpane選項卡上添加圖標
- 5. 如何添加和刪除C#中的「自定義」選項卡
- 6. Jquery自定義選項卡
- 7. 在窗體上移動自定義選項卡/子選項卡
- 8. 添加圖片的選項卡標籤
- 9. Android選項卡,如何顯示選定選項卡的圖像
- 10. 自定義選項卡形狀的ASP.NET選項卡控件
- 11. 如何編輯GVim中每個選項卡的選項卡標籤?
- 12. 自定義TabWidget Android選項卡指標
- 13. 自定義選項卡欄圖標選中時未「填充」
- 14. 所有選項卡添加標題選項卡控件
- 15. 自定義選項卡組加速器
- 16. 在SpringBoot Admin Server上添加一個自定義選項卡
- 17. react-native-router-flux選項卡如何更改選定選項卡的圖標?
- 18. 如何將自定義選項卡添加到Team Web Access
- 19. 在uCommerce中添加自定義選項卡 - 擴展uCommerce
- 20. android中的自定義選項卡
- 21. 自定義選項卡中的Java
- 22. Android中的自定義選項卡
- 23. Android中的自定義選項卡
- 24. 將圖像添加到自定義選項卡
- 25. Magento將自定義選項卡添加到產品視圖
- 26. 使用GWT中的選項卡動態添加選項卡
- 27. 添加一個複選框在yui中的選項卡標籤
- 28. 爲MediaWiki中的所有頁面添加自定義選項卡
- 29. 在每個視圖中滾動具有導航選項卡的選項卡欄
- 30. 如何在選項卡式活動的每個選項卡中添加不同的活動性
您是否嘗試過使用代替在CustomTabBar? –
@MayurBhangale然後它會顯示每個標籤相同的圖像。 –
檢查此:https://reactnavigation.org/docs/navigators/tab –