react-native-typescript-项目环境搭建

1、yarn global add create-react-native-app   //全局安装

2、create-react-native-app 项目名称

3、yarn add typescript tslint -D

4、yarn add @types/react @types/react-native @types/react-dom -D

5、yarn add concurrently rimraf -D

6、yarn add ts-jest @types/jest @types/react-test-renderer -D

7、tsc --init

　8、tsconfig.json

{

"compilerOptions": {

        "module":"es2015",

        "target": "es2015",

        "jsx": "react",

        "rootDir": "src",

        "outDir": "build",

        "allowSyntheticDefaultImports": true,

        "noImplicitAny": true,

        "sourceMap": true,

        "experimentalDecorators": true,

        "preserveConstEnums": true,

        "allowJs": true,

        "noUnusedLocals": true,

        "noUnusedParameters": true,

        "noImplicitReturns": true,

        "skipLibCheck": true,

        "moduleResolution":"Node"

    },

    "filesGlob": [

        "typings/index.d.ts",

        "src/**/*.ts",

        "src/**/*.tsx",

        "node_modules/typescript/lib/lib.es6.d.ts"

    ],

    "types": [

      "react",

      "react-dom",

      "react-native"

    ],

    "exclude":[

        "build",

        "node_modules",

        "jest.config.js",

        "App.js"

    ],

    "compileOnSave": false

}

9、yarn add react-native-scripts

10、package.json

"scripts": {

    "start": "react-native-scripts start",

    "eject": "react-native-scripts eject",

    "android": "react-native-scripts android",

    "ios": "react-native-scripts ios",

    "test": "node node_modules/jest/bin/jest.js",

    "lint": "tslint src/**/*.ts",

    "tsc": "tsc",

    "clean": "rimraf build",

    "build": "yarn run clean && yarn run tsc --",

    "watch": "yarn run build -- -w",

    "watchAndRunAndroid": "concurrently \"yarn run watch\" \"yarn run android\"",

    "buildRunAndroid": "yarn run build && yarn run watchAndRunAndroid ",

    "watchAndRunIOS": "concurrently \"yarn run watch\" \"yarn run ios\"",

    "buildRunIOS": "yarn run build && yarn run watchAndRunIOS ",

    "watchAndStart": "concurrently \"yarn run watch\" \"yarn run start\"",

    "buildAndStart": "yarn run build && yarn run watchAndStart "

  }

11、package.json

"main":"./node_modules/react-native-scripts/build/bin/crna-entry.js"

12、App.js

import App from './build/App';

export default App;

13、src -> App.tsx

/* jshint esversion: 6 */

import React, { Component } from "react"

import { View, Text } from "react-native"

export default class App extends Component {

  render() {

    return(

      <View>

        <Text>hello world</Text>

      </View>

    )

  }

}

14、将babel.config.js移动到src的目录中

巴特西

react-native-typescript-项目环境搭建

8、tsconfig.json

最新文章

热门文章