快速搭建 create-react-native-app

快速搭建 create-react-native-app

React Native 是结合 React + js 来实现混合开发方式
启动项目要保证： pc 和 phone 处于同一局域网
1…yarn 的源配置 — 国外源 —》 国内源（taobao）查看当前 yarn的源

` yarn config get registry`

修改我们的yarn的源

`yarn config set registry https://registry.npm.taobao.org`

2.安装脚手架 create-react-native-app

yarn add create-react-native-app global

3.创建应用程序

creat-react-native-app app  || sudo npx create-react-native-app app || npx creat-react-native-app app

4.启动项目查看第一次启动是否正确

cd app`

`yarn start`

5.如果启动正常， 那么我们就开始配置 Typescript 环境

6.安装依赖包
参考：https://www.cnblogs.com/zh-chen/p/10096732.html

yarn add typescript tslint --dev     可以把ts的错误暴露出来
yarn add @types/react @types/react-native @types/react-dom --dev  react-dom安装后可以基于浏览器使用ts
yarn add concurrently rimraf  react-native-scripts --dev   文件清理
yarn add ts-jest @types/jest @types/react-test-renderer --dev

7.创建tsconfig.json文件

tsc --init

8.修改tsconfig.json文件内容

{
    "compilerOptions": {
        "module":"es2015",
        "target": "es2015",
        "jsx": "react",        //jsx要配置成react，默认情况下没有，不然jsx解析会失败
        "rootDir": "src",      //入口文件夹，默认情况下没有src文件夹，所以还要在项目下创建一个src文件夹进行入口的编译
        "outDir": "build",     //输出文件夹，ts必须打成一个包，把ts转成js无法运行文件，所以先build再去run，同时加上watch每修改一次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":[   // exclude排除哪些配置项
        "build",
        "node_modules",
        "jest.config.js",
        "App.js"   
    ],
 
    "compileOnSave": false
}

9.创建 tslint.json

{
    "rules": {
      "member-access": false,
      "member-ordering": [
          true,
          "public-before-private",
          "static-before-instance",
          "variables-before-functions"
      ],
      "no-any": false,
      "no-inferrable-types": [false],
      "no-internal-module": true,
      "no-var-requires": true,
      "typedef": [false],
      "typedef-whitespace": [
        true, {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        }, {
          "call-signature": "space",
          "index-signature": "space",
          "parameter": "space",
          "property-declaration": "space",
          "variable-declaration": "space"
        }
      ],
      "ban": false,
      "curly": false,
      "forin": true,
      "label-position": true,
      "no-arg": true,
      "no-bitwise": true,
      "no-conditional-assignment": true,
      "no-console": [
        true,
        "debug",
        "info",
        "time",
        "timeEnd",
        "trace"
      ],
      "no-construct": true,
      "no-debugger": true,
      "no-duplicate-variable": true,
      "no-empty": true,
      "no-eval": true,
      "no-null-keyword": true,
      "no-shadowed-variable": true,
      "no-string-literal": true,
      "no-switch-case-fall-through": true,
      "no-unused-expression": true,
      "no-use-before-declare": true,
      "no-var-keyword": true,
      "radix": true,
      "switch-default": true,
      "triple-equals": [
        true,
        "allow-undefined-check"
      ],
      "eofline": false,
      "indent": [
        true,
        "spaces"
      ],
      "max-line-length": [
        true,
        150
      ],
      "no-require-imports": false,
      "no-trailing-whitespace": true,
      "object-literal-sort-keys": false,
      "trailing-comma": [
        true, {
          "multiline":  "never",
          "singleline": "never"
        }
      ],
      "align": [true],
      "class-name": true,
      "comment-format": [
        true,
        "check-space"
      ],
      "interface-name": [false],
      "jsdoc-format": true,
      "no-consecutive-blank-lines": [true],
      "no-parameter-properties": false,
      "one-line": [
        true,
        "check-open-brace",
        "check-catch",
        "check-else",
        "check-finally",
        "check-whitespace"
      ],
      "quotemark": [
        true,
        "single",
        "avoid-escape"
      ],
      "semicolon": [
        true,
        "always",
        "ignore-interfaces"
      ],
      "variable-name": [
        true,
        "allow-leading-underscore",
        "ban-keywords"
      ],
      "whitespace": [
        true,
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type"
      ]
    }
}

10.修改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 "
    }

11.修改package.json 中 入口文件

"main": "node_modules/expo/AppEntry.js",`        修改为：

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

12.在项目根目录下创建一个 src目录， 将项目中的App.js移入这个文件夹， 并将其后缀修改为 .tsx
13.将项目根目录下的 babel.config.js 移入 src目录
14.此时可以看见node_modules/react-native-scripts/build/bin/crna-entry.js文件中的

var _App = require('../../../../App')

所以我们还是需要在根目录下创建一个App.js,

里面书写代码为：import App from './build/App'; export default App;

15.记住在tsconfig.json中 ， 在exclude选项中：将根目录下的App.js排除掉

"exclude":[   // exclude排除哪些配置项
	"build",
	"node_modules",
	"jest.config.js",	
	"App.js"   
],

16.启动项目了

yarn buildAndStart

17.启动项目之后可能会遇到一个问题： _expo2.default.xxx是undefined , 不是一个对象

找到 node_modules / react-native-scripts/build/crna-entry.js

将里面的

	if (process.env.NODE_ENV === 'development') {
      _expo2.default.KeepAwake.activate();
    }

    _expo2.default.registerRootComponent(_App2.default);
    
 修改为： 
 	if (process.env.NODE_ENV === 'development') {
      _expo2.KeepAwake.activate();
    }

    _expo2.registerRootComponent(_App2.default);