React 本机使用矢量图标答案

【问题标题】：React native use vector iconsReact 本机使用矢量图标
【发布时间】：2018-01-18 19:07:13
【问题描述】：

我在使用 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。

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

【问题讨论】：

标签： javascript reactjs icons native

【解决方案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';

对不起，不能评论因为代表，希望它有效。

【讨论】：

【解决方案2】：

我需要手动链接依赖并重建项目。

【讨论】：