反应导航，道具验证中缺少tintColor [英] React-navigation, tintColor is missing in props validation

问题描述

我已将我的反应导航代码放入一个单独的Routes文件中，然后将其导入到App.js文件中.一切工作正常，但是我在Atom/Nuclide中使用Airbnb ESLint配置，并且tintColor出现错误...

I have put my react-navigation code into a separate Routes file which I am then importing into my App.js file. Everything is working fine but I am using Airbnb ESLint config in Atom/Nuclide and getting an error with tintColor...

道具验证中缺少tintColor"

尝试过:

Routes.propTypes = {tintColor:PropTypes.string.isRequired，}

Routes.propTypes = { tintColor: PropTypes.string.isRequired,}

但随后出现错误定义了tintColor PropType，但从未使用过prop"

这是代码的一部分

const Routes = () = {
const ContentNavigator = TabNavigator(
{
  Profile: { screen: ProfileStack },
  History: { screen: HistoryStack },
  Questions: {
    screen: QuestionsStack,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="question-circle" type="font-awesome" size={20} color=
 {tintColor} />
      ),
    },
  },
  Notifications: { screen: NotificationsStack },
},
{
  initialRouteName: 'Profile',
  swipeEnabled: true,
  tabBarOptions: {
    activeTintColor: COLOR_PRIMARY,
  },
  backBehavior: 'none',
});

推荐答案

您可以创建其他 并在您的主要组件中使用.例如:

You could create an additional Functional Component, add PropTypes for it and use in your main component. For example:

...
import PropTypes from 'prop-types';
...

const QuestionsTabBarIcon = ({ tintColor }) => (
  <Icon name="question-circle" type="font-awesome" size={20} color={tintColor} />
);
QuestionsTabBarIcon.propTypes = {
  tintColor: PropTypes.string.isRequired,
};

...

const ContentNavigator = TabNavigator(
  {
    Profile: { screen: ProfileStack },
    History: { screen: HistoryStack },
    Questions: {
      screen: QuestionsStack,
      navigationOptions: {
        tabBarIcon: QuestionsTabBarIcon
      },
    },
    Notifications: { screen: NotificationsStack },
  },
  {
    initialRouteName: 'Profile',
    swipeEnabled: true,
    tabBarOptions: {
      activeTintColor: COLOR_PRIMARY,
    },
    backBehavior: 'none',
  }
);

...

这篇关于反应导航，道具验证中缺少tintColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！