我的所有 js 文件中都出现了这些 ESLint 错误,这些文件导入了 React Native 组件。从所有其他库导入工作正常,应用程序也可以毫无问题地编译和运行。知道可能是什么原因吗?
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
}
}
最佳答案
这是一个已知问题
简短说明
看
node_modules/react-native/index.js
,可以看到它使用了getters定义所有导出。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');
},
这个interferes具有 linter 静态解析导入的能力。解决方法
您可以通过忽略 eslint-plugin-import import/ignore 中的整个 react-native 依赖项来解决此问题。环境:
{
"settings": {
"import/ignore": ["react-native"]
}
}
关于javascript - ESLint 没有找到 React Native 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60973737/