前端程序猿的天花板？react-native开发及调试方案（真实项目，建议收藏）

Posted 2021-07-04 欧阳呀

react-native开发及调试方案 —— 来源于真实企业项目

• • 1. React Native 概述
  • 2. 开发与调试工具
  • 3.package.json 文件
  • 4. FAQ

1. React Native 概述

• 将原生开发的最佳部分与 React 相结合。
• 酌量添加，多少随意。随时都可以把 React Native 无缝集成到你已有的 Android 或 iOS 项目，当然也可以完全从头焕然一新地重写。
• 这是目前很好的一款做APP的框架。（上手也有一定难度）
• 个人认为，使用此框架和你的技术深浅关系不大，主要是要自己通过真实开发去踩坑，真正的程序猿勇士，都是踩坑过来的~

接下来把本人踩的坑分享给大家：

2. 开发与调试工具

• 开发工具：vscode（这个不用多说了）
• 调试工具：mumu模拟器（模拟器是必不可少的，APP无法在浏览器运行）

2.1 mumu模拟器操作步骤：

• 科学上网，安装它
• 导入APP包（当前项目）
  

2.2 运行与调试

需要开启两个服务

• node依赖

node ./node_modules/react-native/local-cli/cli.js start --reset-cache

• 运行项目

 npm run dev:rn

• 项目启动后，刷新mumu浏览器（双击R，手速要快—— 单身程序猿的福音）

• 接下来就会看到控制台编译此项目，如下：
  

• 编译成功是这样的（会看到APP运行）
  

• 效果
  

• 摇一摇配置本地IP地址
  

• 接下来会看到如下页面：
  

• 本地IP地址 + 端口
  

• 谷歌打开调试控制台（打印，以及日志会在这里出现）

• 只能以这种方式调试，你没得选
  

3.package.json 文件

此文件仅供参考，具体看项目去的，重点看服务配置等

{
	"name": "demo",
	"version": "1.0.0",
	"private": true,
	"description": "项目描述",
	"templateInfo": {
		"name": "default",
		"typescript": false,
		"css": "sass"
	},
	"scripts": {
		"build:weapp": "taro build --type weapp",
		"build:swan": "taro build --type swan",
		"build:alipay": "taro build --type alipay",
		"build:tt": "taro build --type tt",
		"build:h5": "taro build --type h5",
		"build:rn": "taro build --type rn",
		"build:qq": "taro build --type qq",
		"build:quickapp": "taro build --type quickapp",
		"dev:weapp": "npm run build:weapp -- --watch",
		"dev:swan": "npm run build:swan -- --watch",
		"dev:alipay": "npm run build:alipay -- --watch",
		"dev:tt": "npm run build:tt -- --watch",
		"dev:h5": "npm run build:h5 -- --watch",
		"dev:rn": "node scripts/polyfill/index.js && npm run build:rn -- --watch",
		"dev:qq": "npm run build:qq -- --watch",
		"dev:quickapp": "npm run build:quickapp -- --watch",
		"tep": "node scripts/template",
		"iconfont": "npx iconfont-taro"
	},
	"author": "",
	"license": "MIT",
	"dependencies": {
		"@react-native-community/viewpager": "^4.1.0",
		"@tarojs/async-await": "2.0.1",
		"@tarojs/cli": "2.0.1",
		"@tarojs/components": "2.0.1",
		"@tarojs/components-rn": "2.0.1",
		"@tarojs/redux": "2.0.1",
		"@tarojs/redux-h5": "2.0.1",
		"@tarojs/router": "2.0.1",
		"@tarojs/taro": "2.0.1",
		"@tarojs/taro-alipay": "2.0.1",
		"@tarojs/taro-h5": "2.0.1",
		"@tarojs/taro-qq": "2.0.1",
		"@tarojs/taro-quickapp": "2.0.1",
		"@tarojs/taro-redux-rn": "2.0.1",
		"@tarojs/taro-rn": "2.0.1",
		"@tarojs/taro-router-rn": "2.0.1",
		"@tarojs/taro-swan": "2.0.1",
		"@tarojs/taro-tt": "2.0.1",
		"@tarojs/taro-weapp": "2.0.1",
		"babel-runtime": "^6.26.0",
		"crypto-js": "3.1.2",
		"dva-core": "^2.0.1",
		"dva-loading": "^3.0.18",
		"global": "^4.4.0",
		"nerv-devtools": "^1.5.6",
		"nervjs": "^1.5.6",
		"node-sass": "^6.0.0",
		"react": "16.8.0",
		"react-native": "0.59.9",
		"react-native-ali-onepass": "2.0.1",
		"react-native-amap-geolocation": "^1.0.4",
		"react-native-amap3d": "^1.1.1",
		"react-native-camera": "2.9.0",
		"react-native-exit-app": "^1.1.0",
		"react-native-fs": "^2.16.6",
		"react-native-qrcode": "^0.2.7",
		"react-native-root-modal": "^3.0.1",
		"react-native-shadow": "^1.2.2",
		"react-native-side-menu": "^1.1.3",
		"react-native-splash-screen": "^3.2.0",
		"react-native-svg": "^9.13.6",
		"react-native-view-shot": "2.6.0",
		"react-native-webview": "5.8.1",
		"react-native-wechat": "^1.9.12",
		"react-native-wechat-lib": "^1.1.26",
		"redux": "^4.0.0",
		"redux-thunk": "^2.3.0",
		"taro-ui": "^2.2.4",
		"tslib": "^1.8.0",
		"vconsole": "^3.3.4",
		"webpack-bundle-analyzer": "^3.6.0",
		"weixin-js-sdk": "1.2.0",
		"wx-base64-qrcode": "^1.0.4"
	},
	"devDependencies": {
		"@tarojs/mini-runner": "^2.0.1",
		"@tarojs/plugin-babel": "2.0.1",
		"@tarojs/plugin-csso": "2.0.1",
		"@tarojs/plugin-sass": "2.0.1",
		"@tarojs/plugin-uglifyjs": "2.0.1",
		"@tarojs/webpack-runner": "2.0.1",
		"@types/react": "^16.4.6",
		"@types/webpack-env": "^1.13.6",
		"babel-eslint": "^8.2.3",
		"babel-plugin-transform-class-properties": "^6.24.1",
		"babel-plugin-transform-decorators-legacy": "^1.3.4",
		"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
		"babel-plugin-transform-object-rest-spread": "^6.26.0",
		"babel-plugin-transform-remove-console": "^6.9.4",
		"babel-plugin-transform-runtime": "^6.23.0",
		"babel-preset-env": "^1.6.1",
		"eslint": "^5.16.0",
		"eslint-config-taro": "2.0.1",
		"eslint-plugin-import": "^2.12.0",
		"eslint-plugin-react": "^7.8.2",
		"eslint-plugin-react-hooks": "^1.6.1",
		"eslint-plugin-taro": "2.0.1",
		"redux-logger": "^3.0.6",
		"stylelint": "9.3.0",
		"stylelint-config-taro-rn": "2.0.1",
		"stylelint-taro-rn": "2.0.1",
		"taro-iconfont-cli": "^1.2.0"
	}
}

4. FAQ

• 务必安装正版谷歌浏览器（否则会出现无法打开谷歌等错误，无法调试）
• 摇一摇需要多摇几次（才会出现配置选项）
• mumu模拟器不需要装其它东西，初始配置就行（又不是打游戏）

本文取自真实企业项目，建议收藏~

1. 如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我