• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

在ReactNative中使用Typescript

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

少侠放心,跟着我的这个步骤走,保你完美在RN项目中使用Typescript,废话不多说,走你

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

yarn global add create-react-native-app

2.创建项目

create-react-native-app projectname(你的项目名字)

3.cd到你的项目文件夹中
4.安装typescript依赖

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

5.安装其他依赖

yarn add concurrently rimraf -D
yarn add ts-jest @types/jest @types/react-test-renderer -D

6.在你的项目根目录下创建一个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>不成功加我qq:291678978,手把手教学好吧</Text>
      </View>
    )
  }
}

12.执行命令:yarn buildAndStart,然后静静的等待运行成功,用你伟大的expo扫描成功的二维码就可以看到伟大的胜利;注:如果想在浏览器看到你的二维码,可再单独执行一下yarn start


然后就可以很开心的在项目里写TypeScript代码了,例如项目中tsx目录下有test.tsx文件,我们在import这个文件时,就像import一个js文件就可以了(注:ts文件后缀名ts和tsx都可以,不过在当前环境下后缀名写成ts好像有问题,如果有问题的话将后缀名改成tsx即可,亲测有效)

import './tsx/test'

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap