0

我正在尝试使用 Ionicons 通过 Tab Navigator 添加图标。

我从 expo/vector-icons 导入它们

import { Ionicons } from '@expo/vector-icons';

然后我将我的屏幕添加到我的导航器

const TabNavigator = createBottomTabNavigator(
  {
    Home: {screen: HomeStack},
    AddNew: {screen: AddNewScreen},
    Settings: {screen: SettingsStack},
  },

并在 navigationOptions 中启动我的 Ionicons

{
navigationOptions: ({ navigation }) => ({

  tabBarIcon: ({ focused, tintColor }) => {

    const { routeName } = navigation.state;
    var iconName;
    if (routeName === 'Home') {
      iconName = 'add-circle-outline';
    } else if (routeName === 'AddNew') {
      iconName = 'ios-add-circle';
    } else if (routeName === 'Settings') {
      iconName = 'md-options';
    }
    return <Ionicons name={iconName} size={25} color={tintColor} />;
  },  });

然后我设置我的 AppContainer 并导出它

const AppContainer = createAppContainer(TabNavigator);

export default AppContainer;

我尝试过使用MaterialIcons而不是 Ionicons 来获得相同的结果。我的同行已经成功实现了 ionicons，他们不必使用 AppContainer 来导出他们的导航器，所以我倾向于认为这就是问题所在。

已经有一段时间了，它对我不起作用。

4

2 回答 2

3

该错误是由于未声明 expo/vector-icons 文件夹。

我在终端中用这个命令解决了这个问题：

npm install @expo/vector-icons

于 2019-03-20T08:31:45.953 回答
1

这可以通过将以下行添加到 app/build.gradle 来解决

   apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

这有助于我获取图标，请注意不要将其粘贴到 android/build.gradle 中。

于 2021-04-13T10:14:44.117 回答