# dataAcquisition

**Repository Path**: websterDev/dataAcquisition

## Basic Information

- **Project Name**: dataAcquisition
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-12-08
- **Last Updated**: 2022-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# **React-Native Note**

## 特点
    由于 AppStore 审核周期的限制，如何动态的更改 app 成为了永恒的话题。无论采用何种方式，我们的流程总是可以归结为以下三部曲：“从 Server 获取配置 --> 解析 --> 执行native代码”。很多时候，我们自觉或者不自觉的利用 JSON 文件实现动态配置的效果，它的核心流程是：

    1. 通过 HTTP 请求获取 JSON 格式的配置文件。
    2. 配置文件中标记了每一个元素的属性，比如位置，颜色，图片 URL 等。
    3. 解析完 JSON 后，我们调用 Objective-C 的代码，完成 UI 控件的渲染。

    通过这种方法，我们实现了在后台配置 app 的展示样式。从本质上来说，移动端和服务端约定了一套协议，但是协议内容严重依赖于应用内要展示的内容，不利于拓展。也就是说，如果业务要求频繁的增加或修改页面，这套协议很难应付。
    最重要的是，JSON 只是一种数据交换的格式，说白了，我们就是在解析文本数据。这就意味着它只适合提供一些配置信息，而不方便提供逻辑信息。举个例子，我们从后台可以配置颜色，位置等信息，但如果想要控制 app 内的业务逻辑，就非常复杂了。
    记住，我们只是在解析字符串，它完全不具备运行和调试的能力。

## 原理
    首先要明白的一点是，即使使用了 React Native，我们依然需要 UIKit 等框架，调用的是 Objective-C 代码。总之，JavaScript 只是辅助，它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid 完全没有关系，它只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。
    其次，React Native 能够运行起来，全靠 Objective-C 和 JavaScript 的交互。
    简单来说，就是把js代码转成Native代码。
    
* 那么，React Native如何把React转化为原生API？

        React Native会在一开始生成OC模块表，然后把这个模块表传入JS中，JS参照模块表，就能间接调用OC的代码。相当于买了一个机器人（Native），对应一份说明书（模块表），用户（JS）参照说明书去执行机器人的操作。

* React Native是如何做到JS和OC交互

        iOS原生API有个JavaScriptCore框架，通过它就能实现JS和OC交互
        1.首先写好JSX代码（React框架就是使用JSX语法）
        2.把JSX代码解析成javaScript代码
        3.OC读取JS文件
        4.把javaScript代码读取出来，利用JavaScriptCore执行
        5.javaScript代码返回一个数组，数组中会描述OC对象，OC对象的属性，OC对象所需要执行的方法，这样就能让这个对象设置属性，并且调用方法。
    ![Image of Yaktocat](http://upload-images.jianshu.io/upload_images/304825-2e92b5710933d1a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)

## 搭建开发环境
* [初始化一个工程](http://reactnative.cn/docs/0.51/getting-started.html#content)
* [集成到现有原生应用](http://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content)
## 实例演示
* 创建一个Native App，目的在于模拟向已经成型的App中导入React-Native，从简入手。
        
        在集成到现有原生应用的过程中会出现一些奇怪的问题，但是经过google一下，总会解决的。
        本例中涉及到的第三方库：
    * [react-native-elements](https://github.com/react-native-training/react-native-elements.git)
    * [react-native-picker](https://github.com/beefe/react-native-picker.git)
    * [react-native-modal-datetime-picker](https://github.com/mmazzarolo/react-native-modal-datetime-picker.git)


* 接下来从Native开始，一步步了解React-Native：
    在Native中创建了一个button，它的点击事件如下：
    ```swift
    @objc func reactNativeAct() {
        let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
        let mockData:NSDictionary = ["scores":
            [
                ["name":"Alex", "value":"42"],
                ["name":"Joel", "value":"10"]
            ]
        ]
        
        let rootView = RCTRootView(
            bundleURL: jsCodeLocation,
            moduleName: "MyReactNativeApp",
            initialProperties: mockData as [NSObject : AnyObject],
            launchOptions: nil
        )
        rootView?.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        let modalViewController = SZRNViewController()
        modalViewController.view.addSubview(rootView!)
        modalViewController.modalTransition.edge = .bottom
        modalViewController.modalTransition.radiusFactor = 0.3
        present(modalViewController, animated: true, completion: nil)
    }
    ```


## CodePush
### 介绍
        我们使用React Native时，模拟器中按一下cmd+D，界面直接刷新，开了Live Reload之后配合watchman更是生猛。
        其实这仅仅是源于localhost上的一个服务器，不断更新内容。但我们的项目 ，默认情况下JS文件会被打包我们的包中，显然它就失去了热部署能力。
        CodePush提供了这样一个平台，可以让应用在你希望的时候去拉取你想更新的包。
        常用命令：
            1、react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/main.jsbundle --dev false
            2、code-push release DataCollection ./bundles 1.0.1  --d Production
            3、code-push deployment ls DataCollection

### 配置介绍：

相关资料：    
   * [CodePush官网](http://blog.csdn.net/sinat_17775997/article/details/74016662)
   * [CodePush 打包集成指北](https://juejin.im/post/5911dca544d904007bfdf8ab)
   * [React Native CodePush实践小结](http://blog.csdn.net/sinat_17775997/article/details/74016662)