⒈ initialization React Native environment
Reference https://reactnative.cn/docs/getting-started.html
⒉ official installation React Native scaffolding tool
npm install -g react-native-cli
⒊ using React Native scaffolding project initialization
# The default is JavaScript REACT - Native ts_react_native the init # can be used directly TypeScript initialization REACT -native the init ts_react_native --template the typescript
⒋ installed watchman
React Native watchman for monitoring changes in a project file, developers often forget to install the watchman caused by the project can not start
cd ts_react_native
y watchman
⒌ environmental change project TypeScript
1. Add TypeScript and Jest and React Native type to your project.
yarn add typescript @types/jest @types/react @types/react-native @types/react-test-renderer # or for npm npm install --save-dev @types/jest @types/react @types/react-native @types/react-test-renderer
⒉ in the root directory of the project to create TypeScript profile tsconfig.json :
{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react", "lib": ["es6"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext" }, "exclude": [ "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" ] }
3. Create a jest.config.js
file to configure Jest to use TypeScript
module.exports = { preset: 'react-native', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], };
4. Rename the file as a JavaScript *.tsx
5. run yarn tsc
to check for new TypeScript file.
6. Start project
# Start ios the Yarn REACT -native a RUN- ios # start Android the Yarn REACT -native RUN-Android