Question

我正在使用react-navigation。

我想为标签添加图标。

Answer 1

如果你要使用react-native-vector-icon要容易得多，只需创建一个类似于我在下面创建的数组，对于你想要使用的图标的所有名称，如果你想使用图像，那么您将不得不使用图像链接，因为我上次检查本机反应将不允许您动态加载静态资产。

使用图标的好处特别是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>

    );

 };

`

如何在自定义标签中的每个标签中添加图标？

1 个答案: