React Native项目搭建（react-native + typescript）

React Native项目搭建（react-native + typescript）1、安装react-nativecli工具npm i -g react-native或者yarn add global react-native2、创建react-native项目react-native init MyRnProject项目名称不允许有中划线，如：my-rn-project3、添加Typescript安装typescript包yarn add –dev typescript安装 react-native-typescript-transformer 包yarn add –dev react-native-typescript-transformer初始化创建tsconfig.jsonyarn tsc –init –pretty –jsx react创建Native TypeScript Transformer的配置文件touch rn-cli.config.js添加React和React Native的类型包yarn add –dev @types/react @types/react-native注释tsconfig.json中的以下一行：{ … // “allowSyntheticDefaultImports”: true, …}向rn-cli.config.js中添加以下内容：module.exports = { getTransformModulePath() { return require.resolve(“react-native-typescript-transformer”); }, getSourceExts() { return [“ts”, “tsx”]; }};4、集成react-native的typescript测试添加 ts-jest依赖yarn add –dev ts-jest 替换package.json中的jest字段为以下内容：“jest”: { “preset”: “react-native”, “moduleFileExtensions”: [ “ts”, “tsx”, “js” ], “transform”: { “^.+\.(js)$”: “<rootDir>/node_modules/babel-jest”, “\.(ts|tsx)$”: “<rootDir>/node_modules/ts-jest/preprocessor.js” }, “testRegex”: “(/tests/.*|\.(test|spec))\.(ts|tsx|js)$”, “testPathIgnorePatterns”: [ “\.snap$”, “<rootDir>/node_modules/” ], “cacheDirectory”: “.jest/cache”}安装类型声明包yarn add –dev @types/jest @types/react @types/react-native @types/react-test-renderer忽略.jest 文件夹# Jest#.jest/至此React Native + TypeScript 项目就搭建完成了