UNPKG

hcmobile-sdk

Version:

mobile-sdk

464 lines (385 loc) 37.9 kB
#### 介入步骤 ~~~ 1. yarn add hcmobile-sdk 2. react-native link hcmobile-sdk ~~~ android 配置:android/build.gradle 加入如下代码 ~~~ buildscript { ... } allprojects { repositories { ... maven { ... maven { url "https://jitpack.io" } } } } ~~~ ##### 1、Button 按钮 | 属性 | 类型 | 默认值 | 描述 | | :---------------: | :--------------: | :--------------------------------------: | :------: | | text | PropTypes.string | '' | 文本内容 | | textStyle | PropTypes.object | { fontSize: 14, color:'black'} | 文本样式 | | buttonStyle | PropTypes.object | { borderRadius: 5, borderColor: '#5ab5f4', borderWidth: 1, justifyContent: 'center', alignItems: 'center',} | 按钮样式 | | backImg | PropTypes.number | | 背景图片 | | backImgStyle | PropTypes.object | { padding:5, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent',} | 背景图片样式 | | backImgResizeMode | PropTypes.string | 'contain' | 背景图片加载样式 | | onPress | PropTypes.func | | 点击事件 | ##### 2、TextInput 输入框 | 属性 | 类型 | 默认值 | 描述 | | :------------------: | :--------------: | :--------------------------------------: | :--------------------------------------: | | style | PropTypes.object | { underlineColor : '#999', underlineWidth : 0.5} | 样式 | | mulitline | PropTypes.bool | false | 是否多行 | | placeholder | PropTypes.string | | 如果没有任何文字输入,会显示此字符串。 | | value | PropTypes.string | '' | 默认值 | | keyboardType | PropTypes.string | enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | 决定弹出的何种软键盘的,譬如`numeric`(纯数字键盘)。 | | editable | PropTypes.bool | True | 如果为false,文本框是不可编辑的。 | | maxLength | PropTypes.number | | 限制文本框中最多的字符数 | | onEndEditing | PropTypes.func | | 当文本输入结束后调用此回调函数。 | | placeholderTextColor | PropTypes.string | | 占位字符串显示的文字颜色。 | | secureTextEntry | PropTypes.bool | false | 如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全 | | onChangeText | PropTypes.func | | 当文本框内容变化时调用此回调函数 | | underlineColor | PropTypes.string | ''#999999' | 下划线颜色 | | underlineWidth | PropTypes.number | 0.5 | 下划线宽度 | ##### 3、RowLayout | 属性 | 类型 | 默认值 | 描述 | | :-------: | :--------------: | :--------------------------------------: | :------: | | tag | PropTypes.string | | tag | | content | PropTypes.string | | 内容 | | arrowImg | PropTypes.number | | 箭头图片 | | lineColor | PropTypes.string | | 下划线颜色 | | style | PropTypes.object | { height:50, width:'100%', backgroundColor:'white',} | 样式 | | isTop | PropTypes.bool | false | 是否显示顶部横线 | | showArrow | PropTypes.bool | True | 是否显示右侧箭头 | | onClick | PropTypes.func | | 点击事件 | #####4、Switch | 属性 | 类型 | 默认值 | 描述 | | ------------------- | -------------------- | ------- | ---------------- | | onValueChange | PropTypes.func | | 当状态变化是调用此函数 | | disabled | PropTypes.bool | false | 如果为true,禁止手动改变状态 | | activeText | PropTypes.string | 'On' | 开启状态显示文本 | | inActiveText | PropTypes.string | 'Off' | 关闭状态显示文本 | | backgroundActive | PropTypes.string | 'green' | 开启状态背景颜色 | | backgroundInactive | PropTypes.string | 'gray' | 关闭状态背景颜色 | | value | PropTypes.bool | false | 开始、关闭 | | circleActiveColor | PropTypes.string | 'white' | 开关旋钮开启时颜色 | | circleInActiveColor | PropTypes.string | 'white' | 开关旋钮关闭时颜色 | | circleSize | PropTypes.number | 30 | 开关旋钮大小 | | activeTextStyle | Text.propTypes.style | | 开启状态文本样式 | | inactiveTextStyle | Text.propTypes.style | | 关闭状态文本样式 | | containerStyle | ViewPropTypes.style | | 样式 | | barHeight | PropTypes.number | null | 高度 | | circleBorderWidth | PropTypes.number | 1 | 开关旋钮边框宽度 | #####5、UltimeateListView 下拉刷新上拉加载ListView | 属性 | 类型 | 默认值 | 描述 | | :------------------------: | :--------------: | :---------------------: | :--------------------------------------: | | refreshableMode | PropTypes.string | 'basic' // or advanced | basic:下拉样式为 RefreshControl;advanced:下拉样式为RefreshView | | refreshable | PropTypes.bool | True | 是否可以下拉刷新 | | separator | PropTypes.func | null | 分割线 | | emptyView | PropTypes.func | null | 列表为空时展示 | | refreshableTitlePull | PropTypes.string | '下拉刷新' | 下拉时文本内容 | | refreshableTitleRefreshing | PropTypes.string | '加载中...' | 加载时文本内容 | | refreshableTitleRelease | PropTypes.string | '释放更新' | 释放时文本内容 | | displayDate | PropTypes.bool | fasle | 下拉刷新时是否显示日期 | | refreshViewHeight | PropTypes.number | 80 | 下拉刷新View高度 | | arrowImageSource | PropTypes.number | | 下拉箭头 | | arrowImageStyle | PropTypes.object | Null | 下拉箭头样式 | | dateFormat | PropTypes.string | 'yyyy-MM-dd hh:mm' | 日期显示样式 | | dateTitle | PropTypes.string | 'Last updated: ' | 日期显示标题 | ##### 6、PickerView 日期、时间、地点选择Picker | 属性 | 类型 | 默认值 | 描述 | | :--------------------------: | :------: | :----------------: | :------------------: | | isLoop | bool | false | 是否显示滚轮效果【仅安卓】 | | pickerTextEllipsisLen | number | 6 | 单个item可显示的最大字符数【仅安卓】 | | pickerTitleText | string | '请选择' | 标题文本 | | pickerTitleColor | number[] | [20, 20, 20, 1] | 标题文本颜色rgba | | pickerConfirmBtnText | string | '确认' | 右侧按钮 | | pickerConfirmBtnColor | number[] | [1, 186, 245, 1] | 右侧按钮色值rgba | | pickerCancelBtnText | string | '取消' | 左侧按钮 | | pickerCancelBtnColor | number[] | [1, 186, 245, 1] | 左侧按钮色值rgba | | wheelFlex | number[] | [1, 1, 1] | 各列所占布局比例 | | pickerBg | number[] | [196, 199, 206, 1] | 背景色 | | pickerRowHeight | number | 24 | 单行高度 | | pickerData | any[] | [] | 所有数据列表 | | selectedValue | any[] | [] | 选中数据 | | pickerToolBarBg | number[] | [232, 232, 232, 1] | 标题背景色 | | pickerToolBarFontSize | number | 16 | 标题字体大小 | | pickerFontSize | number | 16 | 数据字体大小 | | pickerFontColor | number[] | [31, 31 ,31, 1] | 数据字体颜色 | | init options: PickerOptions | fun | | 初始化 | | show() | fun | | 显示 | | hide() | fun | | 隐藏 | | toggle() | fun | | 显示/隐藏 | | select( item: any[] | fun | | 设置选中 | | isPickerShow() | fun | | 是否显示 | | onPickerConfirm(item: any[]) | fun | | 点击右侧按钮时调用 | | onPickerCancel(item: any[]) | fun | | 点击左侧按钮时调用 | | onPickerSelect(item: any[]) | fun | | 滚轴选中一行时调用 | #####7、图片选择器 ImageCropPicker ######1、Request Object | 属性 | 类型 | 默认值 | 描述 | | :-------------------------------------: | :----: | :-------: | ---------------------------------------- | | cropping | bool | false | Enable or disable cropping | | width | number | | Width of result image when used with `cropping` option | | height | number | | Height of result image when used with `cropping` option | | multiple | bool | false | Enable or disable multiple image selection | | writeTempFile (ios only) | bool | true | When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the `includeBase64` option and don't need to read files from disk. | | includeBase64 | bool | false | Enable or disable returning base64 data with image | | includeExif | bool | false | Include image exif data in the response | | cropperActiveWidgetColor (android only) | string | "#424242" | When cropping image, determines ActiveWidget color. | | cropperStatusBarColor (android only) | string | "#424242" | When cropping image, determines the color of StatusBar. | ######2、Response Object | 属性 | 类型 | 描述 | | :-----------------------: | :----: | :--------------------------------------: | | path | string | Selected image location. This is null when the `writeTempFile` option is set to false. | | localIdentifier(ios only) | string | Selected images' localidentifier, used for PHAsset searching | | sourceURL(ios only) | string | Selected images' source path, do not have write access | | filename(ios only) | string | Selected images' filename | | width | number | Selected image width | | height | number | Selected image height | | mime | string | Selected image MIME type (image/jpeg, image/png) | | size | number | Selected image size in bytes | | data | base64 | Optional base64 selected file representation | | exif | object | Extracted exif data from image. Response format is platform specific | | cropRect | object | Cropped image rectangle (width, height, x, y) | | creationDate (ios only) | string | UNIX timestamp when image was created | | modificationDate | string | UNIX timestamp when image was last modified | ##### 8、ViewPager ###### a、ViewPager | 属性 | 类型 | 默认值 | 描述 | | :--------------------------------------: | :---------------------: | :-----: | :-------------: | | initialPage | number | 0 | 默认选中页码 | | keyboardDismissMode | enum('none', "on-drag") | on-drag | 软键盘消失类型 | | onPageScroll | fun | | 当pager滚动时调用 | | onPageScrollStateChanged | fun | | 当pager滚动状态变化时调用 | | onPageSelected | fun | | 当pager选中某一页时调用 | | horizontalScroll | bool | true | 是否支持滚动 | | setPage( selectedPageIndex) | fun | | 设置选中页码 | | setPageWithoutAnimation( selectedPageIndex) | Fun | | 设置选中页码(没有动画效果) | ###### b、IndicatorViewPager | 属性 | 类型 | 默认值 | 描述 | | :--------------: | :-----------------: | :---: | :-----: | | indicator | PropTypes.node | null | dot | | pagerStyle | ViewPropTypes.style | | pager样式 | | autoPlayEnable | bool | false | 是否自动轮播 | | autoPlayInterval | number | 3000 | 自动轮播时间 | | horizontalScroll | bool | true | 是否支持滚动 | ###### c、PagerDotIndicator | 属性 | 类型 | 默认值 | 描述 | | :--------------: | :-----------------: | :-------------------------: | :-----: | | pageCount | number | 0 | 页码数 | | dotStyle | ViewPropTypes.style | backgroundColor: '#BBBBBB', | dot样式 | | selectedDotStyle | ViewPropTypes.style | backgroundColor: 'white' | dot选中样式 | | hideSingle | bool | true | 单个时是否隐藏 | ###### d、PagerTabIndicator | 属性 | 类型 | 默认值 | 描述 | | :---------------------: | :-----------------: | :--: | :---------------: | | tabs | PropTypes.arrayOf() | | tab数组 | | itemStyle | ViewPropTypes.style | | tab样式 | | selectedItemStyle | ViewPropTypes.style | | tab选中样式 | | iconStyle | ViewPropTypes.style | | 图标样式 | | selectedIconStyle | ViewPropTypes.style | | 图标选中样式 | | textStyle | ViewPropTypes.style | | 文本样式 | | selectedTextStyle | ViewPropTypes.style | | 文本选中样式 | | changePageWithAnimation | bool | true | 点击tab改变页码时是否有显示动画 | ###### e、PagerTitleIndicator | 属性 | 类型 | 默认值 | 描述 | | :-------------------: | :-----------------: | :--: | :------: | | titles | String Array | | 标题数组 | | itemStyle | ViewPropTypes.style | | 标题样式 | | itemTextStyle | ViewPropTypes.style | | 标题文本样式 | | selectedItemTextStyle | ViewPropTypes.style | | 标题文本选中样式 | | selectedBorderStyle | ViewPropTypes.style | | 标题下划线样式 | | renderTitle | fun | | 自定义标题 | ##### 9、ActionSheet | 属性 | 类型 | 默认值 | 描述 | | :--------------------: | :----: | :------: | :-----: | | title | string | | 标题 | | message | string | | 消息内容 | | options | arry | | 选项 | | tintColor | string | ‘#007aff | 选项字体颜色 | | cancelButtonIndex | number | 0 | 取消按钮下标 | | destructiveButtonIndex | number | | 标记按钮下标 | | onPress | fun | | 选项点击时调用 | ##### 10、SegmentControl | 属性 | 说明 | 类型 | 默认值 | | --------------------- | ---------------------------------------- | ----------- | ------------ | | prefixCls(`web only`) | 样式前缀 | String | `am-segment` | | className(`web only`) | 样式类 | String | | | style | 自定义样式 | Object | `{}` | | tintColor | 组件主色调 | String | `#2DB7F5` | | disabled | 是否启用 | Boolean | false | | selectedIndex | 选中项在数组中的索引 | Number | 0 | | values | 选项数组,值是字符串 | array | [] | | onChange | 回调函数, 其中`e.nativeEvent.selectedSegmentIndex`是选中项索引, `e.nativeEvent.value`是选中的值. | (e): void | function(){} | | onValueChange | 回调函数 | (val): void | function(){} | ##### 11、KeyboardAwareScrollView | 属性 | 类型 | 默认值 | 描述 | | :------------------------ | :----------------------------- | :--------------------------------------- | :-------------------- | | innerRef | fun | | 获取Scroll的引用 | | viewIsInsideTabBar | bool | false | | | resetScrollToCoords | Object: {x: number, y: number} | | 设置当键盘隐藏时,scroll滚动位置 | | enableAutomaticScroll | bool | true | 当输入框获取焦点时是否自动滚动到焦点位置 | | extraHeight | number | 75 | 当输入框获取焦点时额外滚动距离 | | extraScrollHeight | number | 0 | 给软键盘增加额外高度 | | enableResetScrollToCoords | bool | true | 为true时允许键盘隐藏时滚动到指定位置 | | keyboardOpeningTime | number | 250 | 键盘延迟显示时间 | | enableOnAndroid | bool | false | 是否在android上禁用 | | getScrollResponder | fun | void | Get `ScrollResponder` | | scrollToPosition | fun | x: number, y: number, animated: bool = true | 滚动到指定位置 | | scrollToEnd | fun | animated?: bool = true | 滚动到末尾 | ##### 12、DeviceInfo | 方法 | 返回类型 | ios | android | | :---------------------- | :-------------- | :--: | :-----: | | getAPILevel() | number | N | Y | | getApplicationName() | string | Y | Y | | getBrand() | string | Y | Y | | getBuildNumber() | string | Y | Y | | getBundleId() | string | Y | Y | | getCarrier() | string | Y | Y | | getDeviceCountry() | string | Y | Y | | getDeviceId() | string | Y | Y | | getDeviceLocale() | string | Y | Y | | getDeviceName() | string | Y | Y | | getFirstInstallTime() | number | N | Y | | getFontScale() | number | Y | Y | | getFreeDiskStorage() | number | Y | Y | | getIPAddress() | Promise<string> | N | Y | | getInstanceID() | string | N | Y | | getLastUpdateTime() | number | N | Y | | getMACAddress() | Promise<string> | N | Y | | getManufacturer() | string | Y | Y | | getMaxMemory() | number | N | Y | | getModel() | string | Y | Y | | getPhoneNumber() | string | N | Y | | getReadableVersion() | string | Y | Y | | getSerialNumber() | string | N | Y | | getSystemName() | string | Y | Y | | getSystemVersion() | string | Y | Y | | getTimezone() | string | Y | Y | | getTotalDiskCapacity() | number | Y | Y | | getTotalMemory() | number | Y | Y | | getUniqueID() | string | Y | Y | | getUserAgent() | string | Y | Y | | getVersion() | string | Y | Y | | is24Hour() | bool | Y | Y | | isEmulator() | bool | Y | Y | | isPinOrFingerprintSet() | bool | Y | Y | | isTablet() | bool | Y | Y | #####12、ImageZoom | 属性 | 类型 | 默认值 | 说明 | | -------------------------- | ---------------------------------------- | --------- | ---------------------------------------- | | **cropWidth(required)** | number | 100 | operating area width | | **cropHeight(required)** | number | 100 | operating area height | | **imageWidth(required)** | number | 100 | picture width | | **imageHeight(required)** | number | 100 | picture height | | onClick | ()=>void | ()=>{} | onClick | | panToMove | boolean | true | allow to move picture with one finger | | pinchToZoom | boolean | true | allow scale with two fingers | | clickDistance | number | 10 | how many finger movement can also trigger `onClick` | | horizontalOuterRangeOffset | (offsetX?: number)=>void | ()=>{} | horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation | | onDragLeft | ()=>void | ()=>{} | trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered | | responderRelease | (vx: number)=>void | ()=>{} | let go but do not cancel | | maxOverflow | number | 100 | maximum sliding threshold | | longPressTime | number | 800 | long press threshold | | onLongPress | ()=>void | ()=> {} | on longPress | | doubleClickInterval | number | 175 | time allocated for second click to be considered as doublClick event | | onMove | (object)=>void | ()=> {} | reports movement position data (helpful to build overlays) | | centerOn | { x: number, y: number, scale: number, duration: number } | undefined | if given this will cause the map to pan and zoom to the desired location | ##### 13、ImageViewer | 属性 | 类型 | 默认值 | required | 说明 | | ---------------------- | ---------------------------------------- | ---------------------------------------- | -------- | ---------------------------------------- | | imageUrls | array | | yes | Image Source | | enableImageZoom | boolean | `true` | no | Enable image zoom | | onShowModal | function`(content?: JSX.Element) => void` | `() => {}` | no | The callback for show modal | | onCancel | funcion`() => void` | `() => {}` | no | The callback for cancel modal | | flipThreshold | number | `80` | no | Swipe threshold of the next page | | maxOverflow | number | `300` | no | The X position maximum, that current page can slide to the next page | | index | number | `0` | no | Init index of images | | failImageSource | string, object`{uri: string}` | `''` | no | placeholder for fail | | loadingRender | function`() => React.ReactElement<any>` | `() => null` | no | placeholder for loading | | onSaveToCamera | function`(index?: number => void` | `() => {}` | no | The callback for save to camera | | onChange | function`(index?: number => void` | `() => {}` | no | When the image changed | | saveToLocalByLongPress | boolean | `true` | no | Enable save to camera when long press | | onClick | function`(onCancel?: function) => void` | `(onCancel) => {onCancel()}` | no | Onclick | | onDoubleClick | function`(onCancel?: function) => void` | `(onCancel) => {onCancel()}` | no | OnDoubleClick | | onSave | function`(url: string) => void` | | no | The picture is saved to the local method, if you write this method will not call the system default method for Android does not support saveToCameraRoll remote picture, you can call this callback in Android call native interface | | renderHeader | function`() => React.ReactElement<any>` | `() => null` | no | Custom header | | renderFooter | function`() => React.ReactElement<any>` | `() => null` | no | Custom footer | | renderIndicator | function`(currentIndex?: number, allSize?) => React.ReactElement<any>`: number | `(currentIndex, allSize) => currentIndex + "/" + allSize` | no | Custom indicator | | renderArrowLeft | function`() => React.ReactElement<any>` | `() => null` | no | Custom left arrow | | renderArrowRight | function`() => React.ReactElement<any>` | `() => null` | no | Cutsom right arrow | ##### 14、SelectButton | 属性 | 类型 | 默认值 | required | 说明 | | -------------- | ------- | --------- | -------- | ----------------- | | keyValue | string | undefined | no | 数据的key | | leftText | string | undefined | no | 左侧文字 | | rightText | string | undefined | no | 右侧文字 | | leftTextView | element | undefined | no | 左侧文字 | | rightTextView | element | undefined | no | 右侧文字 | | leftTextStyle | style | {} | no | 左侧文字的样式 | | rightTextStyle | style | {} | no | 右侧文字的样式 | | checkedImage | element | undefined | no | 选中状态的图片 | | uncheckedImage | element | undefined | no | 未选中状态的图片 | | checkedColor | string | undefined | no | 设置默认无图片样式的选中颜色 | | uncheckedColor | string | undefined | no | 设置默认无图片样式的未选中颜色 | | setChecked | boolean | undefined | no | 可以强制保持制定状态 | | defaultChecked | boolean | false | no | 设置初始状态 | | onClick | func | undefined | no | 点击的回调,参数为keyValue | #####15、RadioGroup | 属性 | 类型 | 默认值 | required | 说明 | | -------------- | ------ | --------- | -------- | ------------------ | | defaultChecked | string | '' | no | 设置初始选中的按钮的keyValue | | onClick | func | undefined | yes | 点击的回调,参数为keyValue | | 方法 | 返回值 | 参数 | 说明 | | ---------- | ---- | ---- | ----------------- | | clearState | void | null | 清除RadioGroup的选中状态 | ##### 16、Badge 气泡 | 属性 | 类型 | 默认值 | 描述 | | ---------------------- | ------ | ---------------------------------------- | ----------------------- | | extraPaddingHorizontal | number | 10 | 当宽度大于高度时,额外添加的宽度padding | | style | style | {backgroundColor: 'red', justifyContent: 'center', alignItems: 'center', flexDirection: 'row',} | 样式 | | textStyle | style | {paddingVertical: 2, paddingHorizontal: 4, color: '#fff', fontSize: 14,} | 文字样式 | | minHeight | number | 0 | 最小高度 | | minWidth | number | 0 | 最小宽度 | ##### 17、ModalDropdown | 属性 | 类型 | 默认值 | 描述 | | ---------------------------- | ---------------------------------- | ------------------ | ----------------------- | | disabled | bool | false | 为true时禁用 | | defaultIndex | number | -1 | 默认选中项 | | defaultValue | string | ' Please select... | 默认显示内容 | | options | array | [] | 下拉列表内容 | | animated | bool | true | 为true时显示隐藏动画 | | showsVerticalScrollIndicator | bool | true | 是否显示垂直滚动条 | | style | object | | 样式 | | textStyle | object | | 文本样式 | | dropdownStyle | object | | 下拉菜单样式 | | dropdownTextStyle | object | | 下拉菜单文本样式 | | dropdownTextHighlightStyle | object | | 下拉菜单文本选中样式 | | adjustFrame | fun | | 菜单显示前返回菜单长宽高尺寸值,可进行调整大小 | | renderRow | fun | | 自定义显示下拉菜单 | | renderSeparator | fun | | 自定义分割线 | | renderButtonText | fun | | 自定义选中效果 | | onDropdownWillShow | fun | | 将要显示时调用 | | onDropdownWillHide | fun | | 将要隐藏时调用 | | onSelect(index) | fun | | 选中某项时调用 | | accessible | bool | true | | | keyboardShouldPersistTaps | enum('always', 'never', 'handled') | 'never' | | ​ | 方法 | 返回值 | 参数 | 描述 | | ----------- | ---- | ----- | ---------- | | show() | void | null | 显示dropdown | | hide() | void | null | 隐藏dropdown | | select(idx) | void | index | 设置选择index项 | #####18、Alert | 属性 | 类型 | 默认值 | 描述 | | ----------------- | ------- | --------- | -------------- | | title | string | undefined | 警示框标题 | | message | string | undefined | 警示框信息 | | callbackOrButtons | array | | 按钮及回调数组 | | type | string | Default | 警示框类型 | | placeholder | string | | 占位文字 | | cancelable | boolean | false | 点击警示框外部是否关闭警示框 |