前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)

Posted 欧阳呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)相关的知识,希望对你有一定的参考价值。

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


在这里插入图片描述

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

在这里插入图片描述

以上是关于前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)的主要内容,如果未能解决你的问题,请参考以下文章

十个能让你成为牛逼前端程序猿的特征

一个前端程序猿的Sublime Text3的自我修养

React-Native 基础学习入门指南

React-Native 基础学习入门指南

前端开发到底需要掌握哪些知识?

支付宝前端团队整理的《Web 前端开发入门手册》