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

Question

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

代码：navigation.jsClass

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

请试试这个（假设你创建了一个底部导航器并且你有最新的反应导航）

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,
    }
  }
});

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

TabNavigator customize icon error in react-native

javascript

android

tabnavigator

ios

react-native