javascript - React Native - 检查 `TabBarIcon` 的 render 方法

Question

我在我的应用程序中呈现 createBottomTabNavigator 时遇到了这个问题。

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TabBarIcon`.

我的代码

import React from "react";
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from "react-navigation";
import { FontAwesome } from "react-native-vector-icons";

import SignUp from "./screens/SignUp";
import SignIn from "./screens/SignIn";
import Home from "./screens/Home";
import Profile from "./screens/Profile";

export const SignedOutNavigator = createStackNavigator({
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: "Sign Up"
    }
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Sign In"
    }
  }
});

export const SignedInNavigator = createBottomTabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarIcon: ({ tintColor }) => (
        <FontAwesome name="home" size={30} color={tintColor} />
      )
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      tabBarLabel: "Profile",
      tabBarIcon: ({ tintColor }) => (
        <FontAwesome name="user" size={30} color={tintColor} />
      )
    }
  }
});

export const SignedOut = createAppContainer(SignedOutNavigator);
export const SignedIn = createAppContainer(SignedInNavigator);

引用:https://github.com/datomnurdin/auth-reactnative

Answer 1

导入的 FontAwesome 图标似乎有问题。该库似乎没有将 FontAwesome 的导出命名为默认值。

而是将其导入为

import FontAwesome from "react-native-vector-icons/FontAwesome";