如何在自定義選項卡的每個選項卡中添加圖標？

Question

我正在使用react-navigation。

我想爲選項卡添加圖標。

CustomTabs.js from example directory

Answer 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> 

    ); 

}; 

`