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

存在不兼容的调整！

1. data可以传递为数据，也可以设置为数据源地址（post）。设置为数据源地址时，渲染的数据要在服务处理好。
2. 增加use_cache属性，设置使用缓存，缓存的key为fd-m000016-data。仅当设置为数据源地址时有效
3. 添加控件依赖 @react-native-community/async-storage，如果项目中没有link此库，需要执行 react-native link @react-native-community/async-storage

4.6.201907041838