什么是React-Native？

在介绍React-Native之前我们需要知道常见的5种App开发模式：
1:Native App 
    指的是用原生的api开发app，比如ios、android直接和底层交互，优点性能好，用户体验交互效果好，缺点开发成本维护高，要各自维护一套业务逻辑大同小异的代码。
2:Web App
    指使用html开发的移动端网页app，优先不需要下载安装，不占用手机内存缺点体验差。
3:Hybrid App
    混合开发模式，原生api+html共同开发，比如用html写好界面，用UIWebView展示，优点代码复用性强，一个界面，可用于ios和android，缺点相对于原生开发来说，性能有损耗。
4:Weex
    基于JS语法开发的app，底层毁自动把js代码解析成对应平台的原生api，本质上还是原生的api开发，只不过表面用vue开发。优点跨平台执行，缺点开源较晚，社区规模小。
5:React Native
    它不会生成原生UI组件，而是基于React，React-Native是一个用于构建基于web的交互界面的JavaScript库。有很丰富的UI体验效果，同时也能够很好的调用底层框架的UI使用。可以使用一组技术为ios或者android构建移动应用。这反过来有助于在发布新版本使ios和android应用保持同步，大大减小了开发的时间成本。缺点生态不是很成熟，目前只有官网提供的一些组件和GitHub上小部分封装的组件（比如侧边栏抽屉、横向选择栏、日期选择等等）。并且仍是达不到原生的交互效果和性能。
复制代码

React-Native如何搭建环境？

不推荐使用[官网](https://www.react-native.cn/docs/environment-setup)的沙盒环境，但是如果是自己学习react-native语法的话呢，可以试试，因为expo不需要Xcode或Android Studio只需要运行Expo CLI来打开Expo应用程序，这会让你在正确的开发途径上走的更快。
复制代码

搭建ios的app工具Xcode，开发ios平台的app，Xcode有关键性作用，编译打包上线等等环节都会用到Xcode，后续会写到详细的教程。
安装依赖Node，Node安装详细教程不再写。安装完Node后建议设置npm镜像的淘宝源，或者科学上网加速后边的过程。（安装yarn来代替npm也行）
安装依赖Watchman，Watchman是用来提供监视文件变更的工具，从而实时刷新。
安装依赖CocoaPods，用来管理ios版本的依赖。
创建新项目（注意：如果之前安装过react-native-cli脚手架，先卸掉以避免不必要的冲突。）

npx react-native init MyIosApp
npx react-native init AwesomeTSProject --template react-native-template-typescript  （ts版本）
复制代码

6. 项目模版创建完成后进入项目从新安装一遍依赖

yarn 
复制代码

然后进入ios里查看是否有Podfile文件，如果没有的话

cd ios 
pod init 
复制代码

生成Podfile文件后下载ios的依赖

pod install
复制代码

运行项目官网让我们直接用命令运行，这样才生的报错不清晰，并不能准确的定位错误信息。推荐大家用Xcode编译来运行代码。用xcode打开项目里ios文件中的白色文件。

8. 下载ios的版本左上角Xcode-->Preferences

9.下载完成后在General中设置app的名称、版本、和你要打包的设备类型。

10.在signing&Capabilities中设置开发者信息。Debug包就是我们用来调试的包，也就是测试包，Release包就是生产包（后面讲如何打包生产包并且上线）。

11. 再打包之前确定你的scheme中环境都切到了debug Product-->scheme-->Edit Scheme 以上确定好没有问题了开始打包

准备工作做完下面就可以打包了，选择你想要打包的设备，为什么我能选择Ipad的设备列表，是因为我上边General中选择的设备类型是Ipad。如果你选择了iphone，对应的出现的都是iphone的设备列表。

13. 打包成功后，将会启动一个终端和你选择的设备。

打包真机进行调试

电脑连接ipad，此时Xcode就会在此识别ipad的名字。然后

debug工具

实现开发react-native像webapp一样，能看到DOM节点和网络请求下载地址:github.com/jhen0409/re…

打开的时候状态是未连接的状态，在模拟器上点击Device-->shake-->debug with Chrome 然后工具自动连接，此时能看到打印，但是看不到NetWork的接口，需要双击Diff，点击Enable Network Inspect,接口调用就看见了。

正是包发布

我们是用的蒲公英发布的包,需要通过Xcode生成ipa文件，具体操作步骤： 1:Product-->Scheme-->Edit Scheme 把Scheme改成release包， 2:打包设备设置成Any ios Device 3:Product-->Archive

这样就会创建ipa文件,创建成功之后，在Xcode的Organizer中看到相应的文件。

点击Distribute App 弹出弹窗，用来选择证书的类型。其中Ad Hoc是个人或者公司苹果开发者账号（$99),Enterprice是企业的苹果开发者账号。选择好开发证书点击Next即可。（证书是需要绑定你的苹果开发者账号的，Xcode并不能绑定。如果你的账号绑定了证书，自然就会检索。）

常见的错误和注意事项

1: 这个报错是因为ios文件中的包版本和opadfile.lock文件中版本不一致，从新pod install就解决了。

2: 在ios9之后，网络请求默认为https请求，如需支持http，修改Xcode中的Info添加键值对。

3: 允许项目调用原生的api（比如相机）

4: 打包到真机是落后的代码原因是没有同步js bundle包，项目根路由输入命令：

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
复制代码

拓展React-native的本地存储

syncStorage 是一个简单的、异步的、持久化的Key-Value的储存系统，通常会借助第三方react-native-storage对asyncStorage进行封装，而不是直接使用asyncStorage。使用：

import { AsyncStorage } from 'react-native'; 
import Storage from 'react-native-storage'; 
let storage = new Storage({ 
    size:1000 // 最大容量 
    storageBackend: AsyncStorage, // 储存引擎，对于rn使用             AsyncStorage defaultExpires:null //过期时间 
    enableCache:true //读写时在内存中是不是缓存数据，默认启用 
})
global.storage = storage 
//存储 删除 读取数据
storage.save({}) 
storage.remove({}) 
storage.load({}) //这是一个promise 如果找到数据，就在then中返回。
复制代码

清除React-native的缓存

npx react-native start --reset-cache
复制代码

学习React-Native将近一年，就当写一个总结吧，也希望能解答大家的疑点，常见的错误和注意事项还是有很多需要补充的，只不过时间久了都忘了，报错也都忘记怎么复现了，很是难受。最后欢迎大神补充指正！！

关于React-Native(IOS)总结