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

喜欢ヅ旅行 2022-10-11 15:54 224阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]

## 1. React Native 概述 ##

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

**接下来把本人踩的坑分享给大家：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]

## 2. 开发与调试工具 ##

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

> **2.1 mumu模拟器操作步骤：**

*  科学上网，安装它
 *  导入APP包（当前项目）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]

> **2.2 运行与调试**

**需要开启两个服务**

*  node依赖

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]

*  运行项目

npm run dev:rn

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 4]

*  项目启动后，刷新mumu浏览器（**双击R，手速要快**—— 单身程序猿的福音）
 *  接下来就会看到控制台编译此项目，如下：  
    ![在这里插入图片描述][20210701191705331.png]
 *  编译成功是这样的（会看到APP运行）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 5]
 *  效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 6]
 *  摇一摇配置本地IP地址  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 7]
 *  接下来会看到如下页面：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 8]
 *  本地IP地址 + 端口  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 9]
 *  谷歌打开调试控制台（打印，以及日志会在这里出现）
 *  **只能以这种方式调试，你没得选**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 10]

## 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. 如果存在疑问，可以私信我**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 11]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221005/040137461ba04529944e0f3e65db2e7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221005/9337357fb92b468ca373e6efb3dff2ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: /images/20221005/9c354f4c643443fcae4416dec86d5212.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]: /images/20221005/f72c7d2f785c468bb881475f0c617bc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 4]: /images/20221005/bc5f07ea24ba4d0ebcaa67a04fa0b80f.png
[20210701191705331.png]: /images/20221005/8338a283768449e4889974050ec3df41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 5]: /images/20221005/d7918b82d18f4487a1eacceacd9b216b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 6]: /images/20221005/608bae811f6544c482ba770ede20aeb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 7]: /images/20221005/f5dc6b21964c4390a9c77dbdd04f6ee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 8]: /images/20221005/482f4d37ad154ea7b0307a97e5156629.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 9]: /images/20221005/b319b27f93314eb0a02d1fa655f24981.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 10]: /images/20221005/28c979afe71b46e8834cb8df00c92fb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 11]: /images/20221005/d6e71a71b527405a883b816ddb17edba.png