代码之家  ›  专栏  ›  技术社区  ›  Praveen

反应导航,道具验证中缺少tintColor

  •  4
  • Praveen  · 技术社区  · 7 年前

    我已经把我的react导航代码放在一个单独的路由文件中,然后导入我的应用程序。js文件。一切都很好,但我在Atom/Nucleutic中使用Airbnb ESLint配置,并在tintColor中出错。。。

    尝试了以下操作:

    路线。propTypes={tintColor:propTypes.string.isRequired,}

    这是代码的一部分

    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',
    });
    
    1 回复  |  直到 7 年前
        1
  •  4
  •   sergdenisov    7 年前

    你可以创建一个额外的 Functional Component 添加 PropTypes 并在主要部件中使用。例如:

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