ReactNative 中添加TypesScript支持

踩坑一:

通過ReactNative中文網提供的方法: react-native init MyTSProject --template typescript 創建項目,項目初始化運行就報500,也不知道怎麼處理

解決方案一:

根據網上博客的思路:

刪除全局安裝的react-native-cli
npm uninstall -g react-native-cli

然後使用npx安裝:
npx react-native init app --template react-native-template-typescript

耐心等待安裝結束後即可進行TypeScript開發

解決方案二:

1:package.json中添加:

"devDependencies": {
    "react-native-typescript-transformer": "^1.2.12",
    "react-test-renderer": "16.8.3",
    "typescript": "^3.5.3"
  },

2:在項目根目錄下創建文件:tsconfig.json

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es2015",
    "moduleResolution": "node",
    "jsx": "react-native",
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "watch": false,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es2015.promise",
      "es2015",
      "es2016",
      "dom"
    ]
  },
  "filesGlob": [
    "app/**/*.ts",
    "app/**/*.tsx"
  ],
  "exclude": [
    "index.android.js",
    "index.ios.js",
    "build",
    "node_modules"
  ]
}

3:創建文件:rn-cli.config.js

module.exports = {
    getTransformModulePath() {
        return require.resolve('react-native-typescript-transformer');
    },
    getSourceExts() {
        return ['ts', 'tsx'];
    },
};

4:完成以上3個步驟後,運行:yarn install,成功執行該命令後即可進行TypeScript開發

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章