@feidao-msz/fd-m000016
v4.6.201907311436
Published
层级选择器
Downloads
4
Maintainers
Readme
fd-m000016 层级选择器
Installation
yarn add --dev @dfeidao/fd-m000016
Attributes
属性 | 描述 | 示例
-----|------|-----
show | 设置显示 | show={true}
data | 数据源或数据源地址,第一层的数据的父级标示请设置为'root',如果设置为数据源地址,需要配置post自定义路由 | data={[{ no: '1', parent: 'root', name: 'AAAA' }, { no: '8', parent: 'root', name: '&&&&' }, { no: '2', parent: '0', name: 'BBBB' }, { no: '11', parent: '1', name: 'CCCC' }, { no: '12', parent: '1', name: 'DDDD' }, { no: '111', parent: '11', name: 'EEEE' }, { no: '112', parent: '11', name: 'FFFF' }, { no: '211', parent: '2', name: 'GGGG' }]} data='http://172.16.15.22:8889/get-data'
use_cache | 是否使用缓存,仅当data为数据源地址时有效 注: 控件内保存数据使用的key为'fd-m000016-data' | use_cache={true}
id_field | 提供的数据中可以作为id的字段名, 该字段用来标识每一条结点数据 | id_field='no'
pid_field | 提供的数据中可以作为pid的字段名,该字段用来标识该结点的父结点 | pid_field='parent'
text_field | 提供的数据中可以作为text的字段名,该字段用来在结点上显示 | text_field='name'
select_address | 设置选中值 | select_address=['AAAA','CCCC','EEEE']
title | 选择器标题 | title='自定义标题'
prompt | 设置选择引导文字 | prompt='请选择'
active_color | 设置选中的颜色 | active_color={'#D0648F'}
content_style | 设置列表样式 | content_style={{ backgroundColor: '#F2F2F2' }}
onSelected | 选择回调 | onSelected={(address) => { console.log('address: ', address);}}
Example
import RelationPicker from '@dfeidao/fd-m000016';
<RelationPicker
show={this.state.show}
select_address={this.state.address}
id_field='no'
pid_field='parent'
title='自定义标题'
text_field='name'
// data='http://172.16.15.22:8889/get-data'
data={[{ no: '1', parent: 'root', name: 'AAAA' }, { no: '8', parent: 'root', name: '&&&&' }, { no: '2', parent: '0', name: 'BBBB' }, { no: '11', parent: '1', name: 'CCCC' }, { no: '12', parent: '1', name: 'DDDD' }, { no: '111', parent: '11', name: 'EEEE' }, { no: '112', parent: '11', name: 'FFFF' }, { no: '211', parent: '2', name: 'GGGG' }]}
onSelected={(address) => {
console.log('address: ', address);
this.setState({
address
});
}}
/>
<Button onPress={() => {
this.setState({ show: true });
}} title={this.state.address.toString()}></Button>
ChangeLogs
latest
存在不兼容的调整!
- data可以传递为数据,也可以设置为数据源地址(post)。设置为数据源地址时,渲染的数据要在服务处理好。
- 增加use_cache属性,设置使用缓存,缓存的key为fd-m000016-data。仅当设置为数据源地址时有效
- 添加控件依赖 @react-native-community/async-storage,如果项目中没有link此库,需要执行
react-native link @react-native-community/async-storage