4.6.201907311436 • Published 5 years ago
@feidao-msz/fd-m000016 v4.6.201907311436
fd-m000016 层级选择器
Installation
yarn add --dev @dfeidao/fd-m000016Attributes
| 属性 | 描述 | 示例 |
|---|---|---|
| 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
4.6.201907041838
4.6.201907311436
5 years ago