第
React?Native?中限制导入某些组件和模块的方法
目录限制使用Touchable限制使用Image同时限制两者示例有些时候，我们不希望使用某些组件，而是想使用其他组件。这时候，我们可以使用一个名为no-restricted-imports的eslint规则，该规则允许你指定一个或多个组件的名称，以防止使用这些组件。
no-restricted-imports是eslint自带的一个规则，我们不需要额外引入一个插件。
限制使用Touchable
假如我们希望小伙伴们不要使用Touchable系列组件，而是使用Pressable组件，那么我们可以这样写：
//.eslintrc.js
module.exports={
rules:{
no-restricted-imports:[
error,
paths:[
name:react-native,
importNames:[
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
TouchableNativeFeedback,
message:UsePressableinstead,
}
限制使用Image
又譬如，我们希望小伙伴们使用FastImage组件，而不是使用Image组件，那么我们可以这样写：
//.eslintrc.js
module.exports={
rules:{
no-restricted-imports:[
error,
paths:[
name:react-native,
importNames:[Image],
message:UseFastImagefromreact-native-fast-imageinstead,
}
同时限制两者
如果我们既要限制使用Touchable组件，又要限制使用Image组件，那么我们可以这样写：
//.eslintrc.js
module.exports={
rules:{
no-restricted-imports:[
error,
paths:[
name:react-native,
importNames:[
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
TouchableNativeFeedback,
Image,
message:这个提示怎么写？,
}
但问题是，message怎么写？
我们希望，如果小伙伴使用Touchable组件，那么就提示他UsePressableinstead，如果小伙伴使用Image组件，那么就提示他UseFastImagefromreact-native-fast-imageinstead。
经过作者一番调研，发现可以使用no-restricted-syntax来达到更精确的控制导入目的：
//.eslintrc.js
module.exports={
rules:{
no-restricted-syntax:[
error,
selector:
ImportDeclaration[source.value=react-native]ImportSpecifier[imported.name=/Touchable\\w*/],
message:UsePressableinstead,
selector:
ImportDeclaration[source.value=react-native]ImportSpecifier[imported.name=Image],
message:UseFastImagefromreact-native-fast-imageinstead,
}
效果如下图所示：
当然，对于要限定的某些模块，如果no-restricted-imports能满足需求，则优先使用它。
示例
这里有一个示例，供你参考。