React Native中导入未使用及React组件导入失效问题求助

嘿，这两个都是React Native开发里挺常见的小坑，我来给你拆解解决办法！

问题1：提示“导入声明中的所有导入均未被使用” #

这个提示一般是ESLint（或者你的IDE内置的代码检查工具）给出的警告，本质就是你写了导入语句，但代码里根本没用到这些导入的内容。解决思路分三种情况：

• 确实不需要这个导入：直接删掉对应的导入代码就行。比如你写了import { Text, View } from 'react-native'但只用到了Text，那就把View删掉；要是整行导入都没用，直接删了整行。
• 暂时不用但之后会用到：可以给导入行加个注释让检查工具忽略，比如：

  // eslint-disable-next-line no-unused-vars
  import { View } from 'react-native'
  

• 默认导入的React没用到：从React 17版本开始，JSX语法不再需要手动导入React了，如果你只是写了import React from 'react'但没用到它的其他API，直接删掉这行就行。

问题2：执行Import React, {Components} from 'react';后无法正常工作，components字段不可用 #

这个问题99%是拼写错误！React里的类组件基类是单数的Component，不是复数的Components。正确的导入语句应该是：

import React, { Component } from 'react';

之后你就可以正常继承它写类组件了：

class MyCustomComponent extends Component {
  render() {
    return <Text>这是我的类组件</Text>;
  }
}

另外提一句，现在React社区更推荐使用函数组件，如果你不需要写类组件的话，甚至可以不用导入Component，直接写函数就行：

// React 17+连这个导入都可以省略
import React from 'react';

const MyFunctionComponent = () => {
  return <Text>这是我的函数组件</Text>;
};

如果修正拼写后还是有问题，可以检查一下你的React版本是否过低（不过现在很少有项目用低于16的版本了），或者IDE的缓存问题，重启一下IDE试试。

内容的提问来源于stack exchange，提问作者Jannat Kumar