Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fansenze/react-native-super-chooser
Super Chooser, also you can think of it as a selector
https://github.com/fansenze/react-native-super-chooser
Last synced: 21 days ago
JSON representation
Super Chooser, also you can think of it as a selector
- Host: GitHub
- URL: https://github.com/fansenze/react-native-super-chooser
- Owner: fansenze
- License: mit
- Created: 2017-09-10T12:01:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-03T09:48:51.000Z (over 6 years ago)
- Last Synced: 2024-10-16T17:13:28.563Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-super-chooser
[](https://standardjs.com)
## Getting Started
### Installation
```shell
yarn add react-native-super-chooser
or
npm i react-native-super-chooser
```
#### 本组件依赖 react-native 提供的Art库
> Android默认就包含ART库，IOS需要单独添加依赖库。
+ 在你自己项目的xcode中右键点击项目 -> ‘Add Files to ProjectName -> 选择 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
+ 将 libART.a 添加到 Linked Frameworks and Libraries
> 安卓5.0以下版本(及api版本小于21)时, 状态栏无法设置为沉浸式，所以容器默认高度 = 屏幕高度 - 状态栏高度
> 安卓5.0及以上和ios的容器高度默认屏幕高度。 若状态栏为**非沉浸式**，请自定义容器高度 (containerStyle中定义)
----
### Props
| name | type | value | defaultValue | desc |
|:----:|:----:|:-----:|:------------:|:----:|
| dataSource | Array | | | isRequired, 数据源, 默认数组子元素格式 { label: '', value: '' } |
| labelName | String | | 'label' | 数据源内元素对应的展示字段label的key |
| valName | String | | 'value' | 数据源内元素对应的value的key |
| multiple | Boolean | true/false | false | 是否开启多选模式 |
| isRemoveWhileSelected | Boolean | true/false | false | 选中的单元是否从列表中删除，多选模式时无效 |
| showCancelBtn | Boolean | true/false | false | 是否显示取消按钮 |
| defaultVal | Array/Object | | | 默认选中项 (多选模式未开启时，传入数组的话，只选中数组第一位) |
| renderTitle | Element | | | 头部标题元素 |
| onSubmit | Function | | | 提交触发的函数 |
| onCancel | Function | | | 取消触发的函数 |
| submitBtn | Element | | | 自定义渲染提交按钮 |
| cancelBtn | Element | | | 自定义渲染取消按钮 |
| btnContainerStyle | | | | 自定义按钮容器组件样式 |
| numColumns | Number | | 1 | 与 React-Native 原生组件 Flat 的 numColumns 相同 (其大与1，且为多选模式时，每一个列表项勾选icon不存在) |
| columnWrapperStyle | | | | 与 React-Native 原生组件 Flat 的 columnWrapperStyle 相同 |
| duration | Number | | 300 | 背景动画效果持续时间 |
| position | String |'top'/'bottom'| 'top' | 选择框的定位 |
| backgroundColor | String | | rgba(0, 0, 0, 0.3) | 遮罩层颜色 |
| containerStyle | | | | chooser外部容器 自定义样式 |
| contentStyle | | | | select内容 自定义样式 |
| checkedColor | String | |'#2296F3'| 选中的颜字体颜色 |
| itemStyle | | | | 每一个选项的样式 |
| listStyle | | | | FlatList的样式 |
----
### Example
> 引用
```javascript
import SuperChooser from 'react-native-super-chooser'
import { SuperChooser } from 'react-native-super-chooser'
// 上面两种方式都可以引入模块
import { Symbol } from 'react-native-super-chooser'
// 额外暴露了一个Symbol组件，主要是2个简单的Art绘图
```
> 基础调用, 单选
```javascript
const data = [
{ label: 'fisrt', value: 1 },
{ label: 'second', value: 2 },
{ label: 'third', value: 3 },
{ label: 'fourth', value: 4 },
{ label: 'fifth', value: 5 },
{ label: 'sixth', value: 6 }
]
{ this._SuperChooser = e }}
dataSource={data}
onSubmit={(item) => console.log('onSubmit: ', item)}
contentStyle={{ paddingTop: 20, height: 300 }}
/>
本组件暴露了setVisible方法，参数类型为boolean，来进行组件的显示和隐藏调用
this._SuperChooser.setVisible(true) // 显示组件
this._SuperChooser.setVisible(false) // 隐藏组件
```
----
> chooser定位到底部, 显示取消按钮, 单选
```javascript
{ this._SuperChooser = e }}
dataSource={data}
position='bottom'
showCancelBtn
/>
```
----
> 多列, 单选
```javascript
{ this._SuperChooser = e }}
dataSource={data}
numColumns={3}
containerStyle={{ paddingTop: 64 }}
itemStyle={{ borderRightWidth: 0.5 }}
/>
```
----
> 单列, 多选
```javascript
{ this._SuperChooser = e }}
dataSource={data}
position='bottom'
multiple
containerStyle={{ paddingTop: 20 }}
contentStyle={{ height: 300 }}
/>
```
----
> 多列, 多选, 自定义选中颜色、选项样式和提交按钮, 无取消按钮（取消按钮也可以自定义哦）
```javascript
{ this._SuperChooser = e }}
dataSource={data}
multiple
numColumns={3}
position='bottom'
checkedColor='#000'
itemStyle={{ width: 105, height: 44, flex: -1 }}
contentStyle={{ height: 500, paddingTop: 20 }}
submitBtn={
一顿提交操作
}
onSubmit={(item) => console.log('自定义提交按钮 提交的结果: ', item)}
/>
```
----
> 多列, 多选, 自定义选项样式, 带取消按钮， 默认选中2个选项
```javascript
{ this._SuperChooser = e }}
dataSource={data}
multiple
numColumns={2}
position='bottom'
checkedColor='#000'
defaultVal={[{ label: 'first', value: 1 }, { label: 'sixth', value: 6 }]}
itemStyle={{ width: 105, height: 44, flex: -1, borderColor: '#000', backgroundColor: '#eee' }}
showCancelBtn
columnWrapperStyle={{ justifyContent: 'space-around' }}
contentStyle={{ height: 500, paddingTop: 20 }}
/>
```
----
> 疯狂自定义, 😈 没有我自定义不了的 💯 💯 💯
```javascript
import { Dimensions } from 'react-native'
const { width, height } = Dimensions.get('window')
{ this._SuperChooser = e }}
dataSource={data}
multiple
numColumns={2}
checkedColor='#000'
defaultVal={defaultVal}
backgroundColor='transparent'
containerStyle={{ width: 200, height: 222, left: (width - 200) / 2, top: (height - 222) / 2 }}
contentStyle={{ flex: 1, backgroundColor: '#000', borderRadius: 5 }}
columnWrapperStyle={{ paddingHorizontal: 7, paddingTop: 13, paddingBottom: 0, justifyContent: 'space-between' }}
btnContainerStyle={{ paddingTop: 5, paddingHorizontal: 5, justifyContent: 'space-around' }}
itemStyle={{ backgroundColor: '#f7f7f7', marginHorizontal: 7, height: 30, marginTop: 1, marginBottom: 0 }}
submitBtn={确定}
cancelBtn={取消}
/>
```
