ESLint 找不到 React Native 组件

Question

我在所有导入 React Native 组件的 js 文件中都收到了这些 ESLint 错误。从所有其他库导入工作正常，应用程序也可以编译和运行，没有问题。知道可能是什么原因吗？

  3:3  error  Text not found in 'react-native'        import/named
  4:3  error  View not found in 'react-native'        import/named
  5:3  error  ScrollView not found in 'react-native'  import/named
  6:3  error  StyleSheet not found in 'react-native'  import/named

进口：

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

包.json

"react-native": "0.62.0",
"eslint": "6.8.0",
"eslint-plugin-react-native": "3.8.1",
"@react-native-community/eslint-config": "1.0.0",
"flow-bin": "0.121.0" (not using in my code)

.eslintrc：

{
  "env": {
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended"
  ],
  "plugins": [
    "babel",
    "react",
    "react-native",
    "import"
  ],
  "parser": "babel-eslint",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".json", ".native.js"]
      }
    }
  },
  "rules": {
    "keyword-spacing": [1, { "before": true }],
    "key-spacing": [1, { "afterColon": true }],
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react-native/no-unused-styles": 1,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 0,
    "react-native/no-color-literals": 0,
    "consistent-return": 1,
    "no-unexpected-multiline": 1,
    "no-extra-boolean-cast": 1,
    "no-console": 0,
    "semi": [
      1,
      "always"
    ],
    "no-undef-init": 2,
    "no-undef": 2,
    "no-unused-vars": [1, {
      "vars": "all",
      "args": "after-used",
      "varsIgnorePattern": "hJSX",
      "argsIgnorePattern": "^_"
    }],
    "no-var": 1,
    "eqeqeq": 1,
    "dot-notation": 1,
    "no-caller": 2,
    "no-eval": 2,
    "no-extend-native": 1,
    "no-implied-eval": 2,
    "no-shadow": [
      2,
      {
        "allow": [
          "err"
        ]
      }
    ],
    "quotes": [1, "single"],
    "no-multi-spaces": 1,
    "prefer-arrow-callback": 1,
    "import/default": 0,
    "no-multiple-empty-lines": 1,
    "require-atomic-updates": 0,
    "space-infix-ops": 1,
    "space-unary-ops": 1,
    "comma-spacing": 1,
    "no-mixed-spaces-and-tabs": 1,
    "curly": 1
  },
  "globals": {
    "after": true,
    "afterEach": true,
    "before": true,
    "beforeEach": true,
    "describe": true,
    "xdescribe": true,
    "it": true,
    "xit": true,

    "fetch": true,
    "__DEV__": true
  }
}

Answer 1

这是一个已知问题

• 您可以在react-native #28549上跟踪问题

• 另外，我在 eslint-plugin-import 上打开了一个关于这个问题的 Github问题。

简短说明

查看node_modules/react-native/index.js，您可以看到它使用getter来定义所有导出。

module.exports = {
  // Components
  get AccessibilityInfo(): AccessibilityInfo {
    return require('./Libraries/Components/AccessibilityInfo/AccessibilityInfo');
  },
  get ActivityIndicator(): ActivityIndicator {
    return require('./Libraries/Components/ActivityIndicator/ActivityIndicator');
  },
  get Button(): Button {
    return require('./Libraries/Components/Button');
  },

这会干扰linter 静态解析导入的能力。

解决方法

您可以通过忽略 eslint-plugin-import导入/忽略设置中的整个 react-native 依赖项来解决此问题：

{
  "settings": {
    "import/ignore": ["react-native"]
  }
}