怎么在ReactNative里面使用Typescript

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

今天来搞一搞怎么搭建一个可以使用Typescript的ReactNative环境好吧，一句废话不多说，直接开始好吧

1.全局安装create-react-native-app

yarn global add create-react-native-app

2.create-react-native-app 你的项目名称

例如：create-react-native-app  myApp

　　运行完选择blank回车等待就好

3.cd到你的项目文件夹中，准备安装typeScript依赖

4.安装typeScript依赖

yarn add typescript tslint -D
yarn add @types/react @types/react-native @types/react-dom -D

5.继续安装其他依赖

yarn add concurrently rimraf -D

6.通过tsc --init生成tsconfig.json，或者手动创建一个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
}

7.安装react-native-scripts

yarn add react-native-scripts

8.将package.json中的"scripts"配置清空，并将以下代码替换

"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 "
  }

9.将package.json中的"main"配置清空替换为以下代码

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

10.将App.js中代码清空，并将以下代码替换

import App from './build/App';
export default App;

11.创建一个src文件夹，将babel.config.js文件放在src文件夹下，同时在src文件夹下创建一个App.tsx文件，App.tsx文件中代码如下

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

export default class App extends Component {
  render() {
    return(
      <View>
        <Text>红牛维生素功能饮料</Text>
      </View>
    )
  }
}

12.执行yarn buildAndStart即可

　　注意在此环境下编写ts文件时，后缀名写为tsx，暂时不知道什么原因，写ts后缀名有问题

　　还有特别注意一下，在此环境导入图片时，用import有问题，只能用require，这个问题暂时不知道原因