qm 应用组件-0.1.22

1. FactoryContainer - 基础底部页面
2. FactoryKit - 工具类
3. FactoryPullRefreshListView - 下拉刷新列表
4. FactoryPullToRefresh - 下拉刷新的公共组件
5. FactoryFetch - 请求数据方法
6. FactoryScene - 场景页
7. FactoryViewContainer - 封装 ViewContainer,主要用于键盘的切换等
8. FactoryImage - 图片
9. FactoryHeader - 头
10. FactoryLoading - 加载页
11. FactoryPageProps - 页面公共属性

FactoryContainer - 基础底部页面

包含路由，及 POP 处理的底部页面

Props

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------- | -------------------------------------- | ------ | | routes | 路由配置 | Object，例如{Home: { screen: Home }} | | | backOutPages | 点 Android 返回，需要退出到应用的页面 | Immutable.List | | | initialRoute | 初始化页面 | String | Home |

FactoryKit - 工具类

常用工具集合

API

| 方法名称 | 说明 | | ---------------- | ------------------------------- | | Width | 获取屏幕宽度 | | Height | 获取屏幕高度 | | noop | 空方法 | | simpleDataSource | 简单数据源，用于初始化 DataList | | isAndroid | 判断是否为 Android 机型 | | isIOS | 判断是否为 IOS 机型 | | toFixed2 | 截取两位小数 | | toRound2 | 四舍五入两位小数 | | getWebp | 转换图片为 webp | | alert | alert 弹框 |

FactoryPullRefreshListView - 下拉刷新列表

下拉刷新列表，包含下拉刷新，滑动分页

demo

<FactoryPullRefreshListView
  url={`${QMConst.HOST}/api/wares/new/search/`}
  renderRow={this._renderRow}
/>

Props

| 属性 | 说明 | 类型 | 默认值 | | --------------- | -------------------------------------------------------------------------- | -------- | --------- | | url | 请求数据 url | String | | | renderRow | 渲染行 | Function | | | postBody | 请求参数 | Object | | | postMethod | 请求方式是否为 POST，默认 false | boolean | false | | pageSize | 分页数量 | Number | 10 | | pageNumStr | 请求接口时的分页参数 key | String | pageNum | | convertData | 转换接口返回，需要结果结构为： {res: { dataList }, err: err}，执行于渲染前 | Function | | | onDataReceive | 扭转数据显示，用于异步获取数据拼接，执行于渲染后 | Function | | | duration | 动画消失时间，毫秒 | Number | 400 | | style | view 样式扩展 | Object | | | postBody | 请求参数 | Object | | | backToTop | 是否渲染漂浮的回到顶部按钮，当为 true 时，会渲染漂浮按钮 | boolean | | | renderFlowBtn | 自定义漂浮按钮 | Function | | | renderHeader | 自定义头部 | Function | | | onRefresh | 刷新时的回调 | Function | | | onRefreshEnd | 刷新完成后的回调 | Function | | | onScroll | 滚动时回调 | Function | | | onScrollEnd | 滚动完成后的回头，暂时只支持 IOS | Function | | | isWaitAnimation | 是否等待页面动画完成后再执行当前组件的行为 | boolean | true | | dataSource | 手动传入数据源 | Object | |

FactoryPullToRefresh - 下拉刷新的公共组件

下拉刷新的公共组件

Props

| 属性 | 说明 | 类型 | 默认值 | | ------------------------- | -------------------------------------------- | --------- | ------ | | needCalcStyle | 是否需要动态计算样式 | boolean | | | needInitLoading | 是否需要初始化 loading | boolean | | | duration | 动画消失时间,默认 600ms | number | 600 | | scrollRenderAheadDistance | 超过多少像素也渲染,默认 800 | number | 800 | | onModeChange | 模块变动回调 | Function | | | onScroll | 滚动回调 | Function | | | onScrollEnd | 滚动到底部回调 | Function | | | onRefresh | 刷新回调 | Function | | | onRefreshEnd | 刷新结束回调 | Function | | | contentContainerStyle | contentContainerStyle | ViewStyle | | | autoResize | 是否自动调整大小，仅 Android 有效，默认 true | boolean | true |

FactoryFetch - 请求数据方法

请求数据方法，包含参数组装，返回异常处理

demo

FactoryFetch(`${QMConst.HOST}/api/wares/batchRemove/${QMConst.LINE}`, {
  method: 'POST',
  body: JSON.stringify({ spuIds })
});

FactoryScene - 场景页

一个场景页面，包含头部返回，可配置下拉刷新

demo

<FactoryScene header="商品设价">
  <Main />
</FactoryScene>

Props

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ----------------------------------------- | --------- | ------- | | header | 头部显示字符串 | String | | | renderHeader | 自定义头部 | Function | | | hasBack | 是否有回退按钮 | boolean | true | | onBackHandler | 回退回调 | Function | | | backOut | 是否点回退按钮是退出应用操作 | boolean | false | | style | view 样式 | ViewStyle | | | bodyStyle | body 样式 | ViewStyle | | | backgroundImage | 背景图片 | String | | | onMount | 网络恢复时的回调 | Function | | | loading | 是否 loading | boolean | false | | overflowLoading | 悬浮是否 loading | boolean | false | | pullToRefresh | 开启下拉刷新 | boolean | false | | onPullToRefresh | 下拉刷新的回调 | Function | | | onModeChange | ios 下拉刷新,模式切换 | Function | | | isChangingView | 是否加一个遮罩,当 view 跳转时禁止其它操作 | boolean | false |

FactoryViewContainer - 封装 ViewContainer,主要用于键盘的切换等

封装 ViewContainer,主要用于键盘的切换等

Props

| 属性 | 说明 | 类型 | 默认值 | | ----------------- | ------------ | -------- | ------ | | onDismissKeyboard | 切换键盘回调 | Function | |

FactoryImage - 图片

图片，包含 url 处理

demo

    <FactoryImage source={} width={} height={}/>

Props

| 属性 | 说明 | 类型 | 默认值 | | -------- | ------------ | -------------- | ------------ | | source | 地址，必传 | ImageURISource | | | alt | 加载提示 | String | 图片加载中 | | errorSrc | 加载错误地址 | String | | | width | 宽度 | Number | 100 | | height | 高度 | Number | 100 | | onError | 加载错误回调 | Function | | | onLoad | 加载回调 | Function | | | style | 图片样式 | ImageStyle | |

FactoryHeader - 头

页面头，集成左边返回和右边自定义按钮

demo

<FactoryHeader
  leftTitle="展示与分类"
  add={true}
  onLeftMenuPress={this._handleBack}
  onAddPress={() => this._editCate(null)}
/>

Props

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | ------------------ | --------- | ------- | | leftTitle | 头部显示文本 | String | | | add | 是否显示添加按钮 | boolean | false | | search | 是否显示搜索按钮 | boolean | false | | customize | 自定义右侧按钮 | any | | | onLeftMenuPress | 点击左边回调 | Function | | | onAddPress | 点击添加回调 | Function | | | onSearchPress | 点击搜索回调 | Function | | | onCustomizePress | 点击自定义按钮回调 | Function | | | style | 样式 | ViewStyle | |

FactoryLoading - 加载页

加载页

Props

| 属性 | 说明 | 类型 | 默认值 | | -------- | ---------------- | ------- | ------- | | overflow | 是否悬浮 loading | boolean | false |