如何在自定义选项卡的每个选项卡中添加图标？

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> 

    ); 

}; 

`