javascript - TabNavigator自定义图标在react-native中报错

Question

我正在使用 Xcode 10 和最新的 react-native 版本。 我使用 TabNavigator 创建了 StackNavigator 应用。

代码:navigation.js类

import React from "react";
import { TabNavigator, StyleSheet, Text, View, Image} from "react-navigation";

import Dashboard from '.././Screen/Dashboard'
import Home from '.././Screen/Home'
import Events from '.././Screen/Events'
import Settings from '.././Screen/Settings'


export default Tab = TabNavigator({
  Home: {
    screen: Home,
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
          tabBarLabel: 'Settings',
          tabBarIcon: ({ tintColor }) => (
            <Image source={require('.././assets/setting.png')}
            style= {{width:15, height:15, tintColor:'black'}}>
            </Image>
        )
    },
  },
  Events: {
    screen: Events,
    },
  }, {
  tabBarPosition: 'bottom',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    activeTintColor: '#f2f2f2',
    activeBackgroundColor: "#2EC4B6",
    inactiveTintColor: '#666',
    labelStyle: {
      fontSize: 16,
      padding:4,
    }
  }
});

但是我这里有错误，

[fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Invariant Violation: 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.

如果我删除这一行:

tabBarIcon: ({ tintColor }) => (
                <Image source={require('.././assets/setting.jpeg')}
                style= {{width:15, height:15, tintColor:'black'}}>
                </Image>
            )

那么它在没有图标的情况下也能完美运行。 我搜索了所有内容，但没有找到解决方案。

Answer 1

请试试这个(假设你创建了一个底部导航器并且你有最新的 react 导航)

import { createBottomTabNavigator } from 'react-navigation';

export default createBottomTabNavigator({
  Home: {
    screen: Home,
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
          tabBarLabel: 'Settings',
          tabBarIcon: ({ tintColor }) => (
            <Image source={require('.././assets/setting.png')}
            style= {{width:15, height:15, tintColor:'black'}}>
            </Image>
        )
    },
  },
  Events: {
    screen: Events,
    },
  }, {
  tabBarPosition: 'bottom',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    activeTintColor: '#f2f2f2',
    activeBackgroundColor: "#2EC4B6",
    inactiveTintColor: '#666',
    labelStyle: {
      fontSize: 16,
      padding:4,
    }
  }
});