使用typescript 写reactnative

直接在终端使用react-native init projectname --template typescript
参考链接
官方链接：
https://reactnative.dev/docs/typescript

react-native+typescript+mobx

https://www.meiwen.com.cn/subject/qaiqfqtx.html

参考库
1、https://github.com/react-native-community/react-native-template-typescript
2、https://github.com/Microsoft/TypeScript-React-Native-Starter#typescript-react-native-starter

有个地方需要注意「rootPathPrefix」、tsconfig.json配置完必须导入{babel-plugin-root-import}在babel.config.js里面如下配置才能完全使用root-import功能

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        [
            "babel-plugin-root-import",
            {
                "paths": [
                    {
                        "rootPathPrefix": "@api",
                        "rootPathSuffix": "src/api"
                    },
                    {
                        "rootPathPrefix": "@assets",
                        "rootPathSuffix": "src/assets"
                    },
                    {
                        "rootPathPrefix": "@common",
                        "rootPathSuffix": "src/common"
                    },
                    {
                        "rootPathPrefix": "@config",
                        "rootPathSuffix": "src/config"
                    },
                    {
                        "rootPathPrefix": "@style",
                        "rootPathSuffix": "src/style"
                    },
                    {
                        "rootPathPrefix": "@utils",
                        "rootPathSuffix": "src/utils"
                    },
                    {
                        "rootPathPrefix": "@components",
                        "rootPathSuffix": "src/components"
                    },
                    {
                        "rootPathPrefix": "@global",
                        "rootPathSuffix": "src/global"
                    },
                    {
                        "rootPathPrefix": "@router",
                        "rootPathSuffix": "src/router"
                    },
                    {
                        "rootPathPrefix": "@store",
                        "rootPathSuffix": "src/store"
                    }

                ]
            }
        ],
        ["@babel/plugin-proposal-decorators", {"legacy": true}]
    ]
};

如果要对typescript 的项目进行调试、需要添加

react-native-typescript-transformer

然后对应【metro.config.js】修改如下

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
        babelTransformerPath: require.resolve('react-native-typescript-transformer')
      },
    }),
  },
};

然后就可以进行正常调试了