Use TypeScript create React Native

⒈ 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.jsfile 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 tscto 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

 

 

Guess you like

Origin www.cnblogs.com/fanqisoft/p/12030752.html