手把手教你使用react-native snippets

66 阅读1分钟

效果: GIF 2024-6-15 15-02-14.gif

第一步打开User Snippets设置

image.png

第二步选择typescriptreact.json

image.png

第三步粘贴snippet

image.png

{
    "Typescript default React component": {
        "scope": "typescriptreact",
        "prefix": "raft",
        "body": [
          "import React, {memo} from 'react';",
          "import {View, Text, StyleSheet} from 'react-native';",
          "import {useTranslation} from 'react-i18next';",
          "",
          "interface ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props {",
          "  $1",
          "}",
          "",
          "export const ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}: React.FC<${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props> = ({ $2 }) => {",
          "  const {t} = useTranslation();",
          "  return (",
          "    <View>",
          "     <Text>${3:$TM_FILENAME_BASE}</Text>",
          "    </View>",
          "  )",
          "}",
          "",
          "const styles = StyleSheet.create({});",
          "",
          "export default memo(${TM_FILENAME_BASE/(.*)/${1:/capitalize}/});"
        ],
      }
}

第四步新建文件 输入raft 大功告成

image.png