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";

Answer 2

如果您没有看到图标，请在android上运行命令

cd android && ./gradlew

React Native-检查`TabBarIcon`的渲染方法

2 个答案: