React Native项目环境搭建

好啦，今天讲一下怎么搭建react-native项目环境啦啦啦啦啦~~~~步骤如下

首先就是expo init 文件夹名称

第二步：执行下面步骤

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

　

 之后打开  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
}

之后执行  

yarn add react-native-scripts　　

打开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": "tslintsrc/**/*.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 "
  }　　

 更改package.json中main的配置项

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

App.js中的配置是下面这样子哒

src文件夹下的App.tsx

import React, { Component } from"react"
import{ View, Text } from"react-native"
 
exportdefaultclass App extends Component {
render() {
return(
<View>
<Text>hello world</Text>
</View>
    )
  }
}

　　将babel.config.js移动到src目录下 ，之后运行yarn  buildAndstart命令即可。

 在这里附上一个项目启动的参考文档啦，，额，打开这个文档需要科学上网一下下，嘻嘻嘻

https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-1-a81b6970bb82