时间戳

首页 > 解决方案 > 反应导航 | [eslint] 解析错误：意外令牌 = | 反应原生

reactjs - 反应导航 | [eslint] 解析错误：意外令牌 = | 反应原生

问题描述

我遇到了 Air Bnb eslint 规则集的 linting 问题，这是我的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

class HomePage extends Component {
  static navigationOptions = {
    title: 'Whats on',
    headerStyle: {
      backgroundColor: '#1980F5',
    },
    headerTintColor: '#fff',
  };

  render() {
    return (
      <View>
        <Text>Insert HomePage</Text>
      </View>
    );
  }
}
export default HomePage;

在 navigationOption 之后，它不喜欢“=”（第 9 行）并在标题中显示消息。一切正常，但我想知道如何在不禁用规则的情况下摆脱 ESlint 错误。

提前致谢

标签： reactjsreact-nativereact-navigationeslinteslint-config-airbnb

解决方案

根据https://github.com/airbnb/javascript/issues/589 ，这仍然是预期的行为，但可以通过添加babel-eslint解析器和transform来解决。

在你.eslintrc添加

{
  ...
  "parser": "babel-eslint",
  "settings": {
    ...
    "import/parser": "babel-eslint",
  }
  ...
}

如果您想避免这种情况，您还可以将该值添加为类的属性。

class Example {}
Example.staticProp = 'value';

推荐阅读