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

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

eslint-config-airbnb react-navigation eslint react-native javascript

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 年前

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

...

推荐文章

Asken · 运行此时_登录“this”。导航“未定义”`

7 年前

Rubel hasan · react native swipeout不适用于android

7 年前

lmotl3 · 如何在所有屏幕上呈现相同的组件?

7 年前

Mehreen Khan · 导入react navigation和native base时出错

7 年前

TMD · 使用react navigation redux后,获取警告

7 年前

Israel Z Kollie · 遇到错误:undefined不是对象(正在评估“navigation.navigate”)

7 年前

lmotl3 · 如何访问此。对象内的道具?

7 年前

Bondan Noviada · 从tabview子级调用navigate函数

7 年前

Jules · React navigation StackNavigator-允许卡中的场景扩展到可用空间之外

7 年前

Alessio Chiffi · 在没有集成Redux的情况下响应导航?

7 年前