zoukankan      html  css  js  c++  java
  • 怎么在ReactNative里面使用Typescript

    今天来搞一搞怎么搭建一个可以使用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,这个问题暂时不知道原因

  • 相关阅读:
    MVC4学习-View(0)
    javascript与常用正则表达式
    uhfreader&rfid标签测试
    WebClient文件上传很方便哈
    NAudio的简单用法
    与wmi交互,调非托管代码,单元测试遇到的一些问题
    我在这里骑美团单车被交警罚了50元,这个地方不能骑共享单车大家留意了
    发邮件,美化table格式
    学习jwt的简单使用
    学习redis的基本使用
  • 原文地址:https://www.cnblogs.com/suihang/p/10040531.html
Copyright © 2011-2022 走看看