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

【问题标题】：React Navigation | [eslint] Parsing error: Unexpected token = | React-Native反应导航 | [eslint] 解析错误：意外令牌 = |反应原生
【发布时间】：2019-01-30 22:39:30
【问题描述】：

我遇到了 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 错误。

提前致谢

【问题讨论】：

标签： reactjs react-native react-navigation eslint eslint-config-airbnb

【解决方案1】：

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

在你的.eslintrc 添加

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

如果您想避免这种情况，也可以将该值作为属性添加到类中。

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

【讨论】：