快速搭建 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);