Package Exports

react-native-arenakit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-arenakit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Swiper

滑动组件参考 react-native-swiper 使用方式

关于运行时环境使用

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

cocoapods安装： gem install cocoapods

使用方式：

新建项目 react-native init Demo
进入项目执行cd Demo && npm install react-native-arenakit --save
添加依赖 react-native link react-native-arenakit
进入项目的ios目录使用 pod init 初始化依赖配置文件
配置当前微应用所使用到的arena api依赖，如：
在ios目录下执行 pod install 安装依赖的api组件
在AppDelegate.m文件中添加如下代码

//启动监听，注意运行时环境代码必须放在这个位置
[[ArenaRuntime defaultRuntime] startRuntime];

//设置环境 Test-测试环境 Production-生产环境,默认：测试环境
[[ArenaRuntime defaultRuntime] environment: Test];

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

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

打开项目配置文件 Info.plist文件，文件位置：
在文件末尾添加配置如下：

配置内容：

    <key>NSCameraUsageDescription</key>
    <string>想访问您的相机</string>
    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
    <string>请允许前后台定位</string>
    <key>NSLocationAlwaysUsageDescription</key>
    <string>请允许后台定位</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>请允许前台定位</string>