javascript - React native 使用矢量图标

Question

我在使用react-native-vector-icons包中的图标时遇到问题。

这是我的导入方式:

import MaterialIcon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import FoundationIcon from 'react-native-vector-icons/dist/Foundation';

这是我的使用方法:

<BottomNavigation
              labelColor="white"
              rippleColor="white"
              style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
              onTabChange={(newTabIndex) => {return} }
              >
                <Tab
                barBackgroundColor="#37474F"
                label="Movies & TV"
                icon={<MaterialIcon size={24} color="white" name="tv" />}
                />
                <Tab
                barBackgroundColor="#00796B"
                label="Music"
                icon={<FoundationIcon size={24} color="white" name="music" />}
                />
                <Tab
                barBackgroundColor="#5D4037"
                label="Books"
                icon={<FoundationIcon size={24} color="white" name="books" />}
                />
            </BottomNavigation>

行为是:图标正在显示，但图标错误。 Material 显示为日本符号，Foundation 显示为中间有 X 的正方形。

如何正确导入和使用这些图标？

Answer 1

在我的项目中，我使用导入为:

import Icon from 'react-native-vector-icons/Ionicons'

所以尝试导入为:

import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import FoundationIcon from 'react-native-vector-icons/Foundation';

抱歉，由于代表原因无法发表评论，希望它有效。