RN笔记：RN开发环境+项目依赖

前言：从前端的发展历程上看，从切图仔到全端，注定有舍有得，边界会越来越大，技术会越来越丰富，贯穿浏览器、服务端和移动端多元化发展趋势。花了一天时间纠结用HTML5+和RN来开发安卓ios双端，考虑稳定性选择用RN，做好被虐上整整一个月的心理准备，开发过程中事实也确实如此，坑多慎入。
另外建议当决定要用RN重构应用或者基于RN开发时，尽量提前梳理业务文档，有条件先组预研发小组，去研究业务实现的可能性，比如说集成外部的sdk，切记原生部分最好要求配合安卓ios朋友一起合作，否则会很难受。
从技术角度，入坑先从vue跳到react，再入react-native。此文章主要记录项目开发中填坑过程。

RN开发环境

1. 安卓开发环境
   https://reactnative.cn/docs/getting-started/
   安装的依赖有：Node 10+，JDK1.8 ，python 2.7，yarn（代替npm），Android Studio（安卓开发工具）用于模拟器打开项目
2. ios开发环境
   安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 Xcode。

创建项目

react-native init 项目名
tip:react-native 版本更新较快，init默认是最新版本的react-native，目前最新发布版本0.60.0版本（更新修复，支持androidX，完全删除了WebView，Geolocation...），也可根据需要创建指定版本RN：
react-native init 项目名 --version 0.59.9
进入项目目录查看react-native版本 ：react-native -V

在设备中启动项目

1. 安卓设备
   模拟器启动：Android studio中打开项目中android文件夹，点击操作栏图标（类似手机），先创建自己的模拟器

   
   
   15402667-006bf76a3ad7e346_副本.png

接着在项目目录下，命令行服务端口react-native start

15402667-de8a1c5a4c81bdb8_副本.png

点击启动按钮，选择模拟器就可启动项目

image.png

真机启动：用usb连接电脑和手机（手机必须在开发者选项下，打开usb调试模式，否则启动会报错），在项目目录下，命令行启动：
react-native run-android
App安装完成，node窗口进度条走完即可在手机上运行RN项目。

模拟器与真机开发者菜单主要用到：Reload （重载），Debug JS Remotely(Debug 调试模式，可在浏览器中console.log输出)，Enable Hot Reloading(热更新)；
开发者菜单打开方式：
模拟器：ctrl+m ， r+r(为reload)
真机：手机摇一摇，或者左键长按

2. ios设备
   xcode打开ios目录下***.xcodeproj，左上角选择模拟器类型，点击运行，即可在模拟器中运行RN应用，另外在外部设备运行需要开发者账号。

RN项目依赖

根据项目需要可选择安装依赖插件，示例项目依赖

   "@react-native-community/async-storage": "^1.4.2", //本地存储
    "@react-native-community/netinfo": "^3.2.1",//断网处理
    "@react-native-community/viewpager": "^1.1.7",
    "prop-types": "^15.7.2",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-baidu-map": "1.0.2",//百度地图
    "react-native-camera": "^2.10.2",//摄像头扫码功能
    "react-native-easy-toast": "^1.2.0",//toast 轻提示
    "react-native-fit-image": "^1.5.4",//自动适应图片
    "react-native-flexi-radio-button": "^0.2.2",//radio
    "react-native-gesture-handler": "^1.3.0",//手势
    "react-native-image-picker": "^0.28.1",//上传图片
    "react-native-linear-gradient": "^2.5.4",//渐变颜色
    "react-native-modal": "^11.0.1",//modal弹窗
    "react-native-modal-dropdown": "^0.6.2",//下拉弹框
    "react-native-permissions": "^1.1.1",//权限
    "react-native-qrcode-svg": "^5.1.2",//二维码
    "react-native-render-html": "^4.1.2",//html内容渲染
    "react-native-scrollable-tab-view": "^0.10.0",//tab切换效果
    "react-native-splash-screen": "^3.2.0",//启动屏
    "react-native-svg": "^9.5.1", //图形支持
    "react-native-swiper": "^1.5.14",//轮播
    "react-native-textarea": "^1.0.3", //多行输入
    "react-native-vector-icons": "^6.5.0",//图标库
    "react-native-webview": "^5.12.1",//webview
    "react-navigation": "^3.11.0",//导航
    "react-navigation-redux-helpers": "^3.0.2",  //集成redux必须集成此库
    "react-redux": "^7.1.0", //react官方提供的 React 绑定库
    "redux": "^4.0.1"//JavaScript 状态容器，提供可预测化的状态管理

依赖安装方法：
yarn install //安装全部依赖
yarn add 依赖名 //安装单个依赖
yarn add 依赖名@版本号 //安装依赖某个版本
yarn remove 依赖名 //删除依赖 ，删除依赖后，需要把安卓ios原生文件中删除依赖

需要依赖原生库
react-native link 依赖内一次性全部链接
react-native link 依赖名 链接某一个库

假设，根据项目需要修改了依赖包源码，在项目根目录复制修改源码的包，
在pagejson.json文件修改文件安装路径。