react-native-arenakit/README.md

为编写arena app中react native应用提供基础的ui及原生能力api支撑

react-native-arenakit使用说明
===

`react-native-arenakit` 是提供给arena宿主容器的一个UI及功能库，集成了一些基础组件提供给业务端使用, 且提供了api调用能力，方面业务端调试，目前仅能支持iOS端调用能力。

### 业务团队集成：

	
	1. npm install react-native-arenakit --save

	添加依赖至原生项目
	2. react-native link react-native-arenakit


### 宿主集成：

安卓：使用jitpack第三方管理工具集成，可自行搜索如何添加jitpack配置，配置完成后直接在模块的dependencies中配置`compile 'com.github.chenyunjie:RNArenaKit:2.0.1'
` 暂时使用私人github，后续更换，依赖添加完成后添加ReactPackage, RNArenaKit的Pakcage名字为RNArenaKitPackage，将其添加到package管理中去。

iOS：ios宿主中使用了package.json来管理依赖，在package.json中添加 `react-native-arenakit` npm依赖并执行 `npm i` 安装，然后将依赖文件中的 `node_modules/react-native-arenakit/ios/Release/libReactNativeArenaKit.a`添加至依赖，注意使用相对路径的方式，而不是直接拷贝到工程，方便版本更新到控制


### 组件说明

#### Arena

提供部分基础功能api支持

使用方法：
```
import {Arena} from 'react-native-arenakit'
//原生事件监听
Arena.addEventListener('name', function() {
	//TODO      
});
```

#### Selection
点选组件，支持多选，单选

	<Selection dataSource={this.state.dataSource} 
			   itemLabel={(item) => item["name"]} 
			   horizontalGap={10}/>


参数 | 必选 | 类型 | 默认值 | 描述
----|----|----|----|----
selectedIndex | 否 | number | | 当前选中值索引
selectedItem | 否| object | | 当前选中对象
selectable| 否 | boolean | | 是否可选
selectableOnEmpty | 否 | boolean |  |当前组件如果未选择且selectable为false时是否可选
itemRender | 否 | function(item, index, selected) | | 渲染函数
multiple | 否 | boolean | true | 是否多选
dataSource | 是 | array | [] | 数据源
itemStyle | 否 | object | {} | 每个选项的样式
itemLabel | 否 | function(item):string | | 选项展示文字函数，默认直接取值
horizontalGap | 否 | number | 0 | 横向间距
verticalGap | 否 | number | 0 | 纵向间距
onChange | 否 | function(item, index, selected) | | 选中值发生变化时调用 



#### DateTimePicker
日期选择组件，支持时间、日期、日期+时间
#### Picker
上拉选择组件，此组件为API调用方式使用,非UI组件。
```
Picker.init({
    pickerData: ["男", "女"],
    onPickerConfirm: data => {
        console.log("选中了：" + data);
    }
});
Picker.show()

```

具体参数及使用方式参考 [react-native-picker](https://github.com/beefe/react-native-picker)


#### Swiper
滑动组件
参考 [react-native-swiper](https://github.com/leecade/react-native-swiper) 使用方式


### 关于运行时环境使用
运行时环境是指在微应用所在的的工程可以直接调用宿主容器所提供的原生api，而不需要集成到宿主中才能调用原生功能进行调试，目前仅支持iOS平台使用，且使用时必须结合cocoapods使用.

cocoapods安装： `gem install cocoapods`

使用方式：

1. 新建项目 `react-native init Demo`
2. 进入项目执行`cd Demo && npm install react-native-arenakit --save`
3. 添加依赖 `react-native link react-native-arenakit`
4. 进入项目的ios目录使用 `pod init` 初始化依赖配置文件
5. 配置当前微应用所使用到的arena api依赖，如：   

	<img src="https://zhishiku.me/pod_config.png" width="50%" height="50%" />
   
6. 在ios目录下执行 `pod install` 安装依赖的api组件
7. 在AppDelegate.m文件中添加如下代码

  	<img src="https://zhishiku.me/arenakit_demo.png" width="50%" height="50%" style="zoom:50%" />
  	
  ```	
  //启动监听，注意运行时环境代码必须放在这个位置
  [[ArenaRuntime defaultRuntime] startRuntime];
  
  //设置环境 Test-测试环境 Production-生产环境,默认：测试环境
  [[ArenaRuntime defaultRuntime] environment: Test];
  ```
  	

安装完成后就可以直接调试arena支持的原生api了,需要注意的是如果用到微信相关需要配置key的api时需要手动调用api中所提供的配置key的方法,暂不支持地图及微应用跳转相关的api调用

如果使用到相机相关的api，如扫描二维码则需要在项目中配置：

1. 打开项目配置文件 Info.plist文件，文件位置：    

	<img src="https://zhishiku.me/carmera_config.png" width="30%" height="30%" />
      
      
2. 在文件末尾添加配置如下：   
    
                       
                       
	<img src="https://zhishiku.me/plist_config.png" width="30%" height="30%"/>
	
	配置内容：
```
	<key>NSCameraUsageDescription</key>
	<string>想访问您的相机</string>
	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
	<string>请允许前后台定位</string>
	<key>NSLocationAlwaysUsageDescription</key>
	<string>请允许后台定位</string>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>请允许前台定位</string>
```