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

Question

我正在使用反应导航。

我想为选项卡添加图标。

Answer 1

如果你要使用 react-native-vector-icon 就容易多了，只需像我在下面创建的那样创建一个数组，用于你想要使用的图标的所有名称以及你是否想要使用图像, 那么你将不得不使用图像链接，因为我上次检查 react native 时不允许你动态加载静态资产。

使用图标的好处，尤其是 react-native-vector-icon：

访问大量图标集。
样式是否集中。
..还有其他我不记得的东西。

`

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

    );

 };

`

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

How to add icon in each tab in custom Tabs?

react-native

react-native-android

react-navigation