React?Native?中限制導入某些組件和模塊的方法

更新時間：2022年08月02日 09:29:50 作者：todoit

這篇文章主要介紹了React?Native?中限制導入某些組件和模塊的方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

限制使用 Touchable

假如我們希望小伙伴們不要使用 Touchable 系列組件，而是使用 Pressable 組件，那么我們可以這樣寫：

// .eslintrc.js
module.exports = {
  rules: {
    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "react-native",
            importNames: [
              "TouchableOpacity",
              "TouchableHighlight",
              "TouchableWithoutFeedback",
              "TouchableNativeFeedback",
            ],
            message: "Use Pressable instead",
          },
        ],
      },
    ],
  },
}

限制使用 Image

又譬如，我們希望小伙伴們使用 FastImage 組件，而不是使用 Image 組件，那么我們可以這樣寫：

// .eslintrc.js
module.exports = {
  rules: {
    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "react-native",
            importNames: ["Image"],
            message: "Use FastImage from react-native-fast-image instead",
          },
        ],
      },
    ],
  },
}

同時限制兩者

如果我們既要限制使用 Touchable 組件，又要限制使用 Image 組件，那么我們可以這樣寫：

// .eslintrc.js
module.exports = {
  rules: {
    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "react-native",
            importNames: [
              "TouchableOpacity",
              "TouchableHighlight",
              "TouchableWithoutFeedback",
              "TouchableNativeFeedback",
              "Image",
            ],
            message: "這個提示怎么寫？",
          },
        ],
      },
    ],
  },
}

但問題是， message 怎么寫？

我們希望，如果小伙伴使用 Touchable 組件，那么就提示他 Use Pressable instead ，如果小伙伴使用 Image 組件，那么就提示他 Use FastImage from react-native-fast-image instead 。

經(jīng)過作者一番調(diào)研，發(fā)現(xiàn)可以使用no-restricted-syntax 來達到更精確的控制導入目的：

// .eslintrc.js
module.exports = {
  rules: {
    "no-restricted-syntax": [
      "error",
      {
        selector:
          "ImportDeclaration[source.value='react-native'] > ImportSpecifier[imported.name=/Touchable\\w*/]",
        message: "Use Pressable instead",
      },
      {
        selector:
          "ImportDeclaration[source.value='react-native'] > ImportSpecifier[imported.name='Image']",
        message: "Use FastImage from react-native-fast-image instead",
      },
    ],
  },
}

效果如下圖所示：