抽屉菜单列表

https://dfeidao.gitee.io/widgets-mobile/

目前列表使用的是FlatList，支持FlatList所有属性

一、安装

yarn add @dfeidao/fd-m000011 --dev

二、属性

属性|默认值|类型|示例|描述 --|--|--|--|-- data|-|Array|data={[{ key: 'a' }, { key: 'b' }]}|列表数据 left_menu|-|function|left_menu={((item) => { return <Text style={{ width: 100, backgroundColor: 'red', height: 100 }}>item; })}|左侧隐藏的菜单 left_open_value|-|number|left_open_value={100}|和left_menu的宽度保持一直 right_menu|-|function|right_menu={((item) => { return ( <View style={{ backgroundColor: '#4b9dfa', height: 100, width: 100 }}> {item.txt} <Button title='button' onPress={() => { Alert.alert('123'); }}> ); })}|右侧隐藏的菜单 right_open_value|-|number|right_open_value={100}|和right_menu的宽度保持一直 body|-|function|body={((item) => {return <View style={{ backgroundColor: '#fff', height: 100, width: '100%', justifyContent: 'center', alignItems: 'center' }}>{JSON.stringify(item)};})}|列表内容 preview|true|boolean|preview={true}|首行是否应进行滑出预览以显示它是可滑动的 loading_state| 无，可选属性 |'' | 'loading' | 'complete' | loading_state={'loading'} | 不设置时不显示底部加载状态。设置为'loading'时，表示为加载中状态，设置为'complete'时，表示为加载完成状态 loading_footer | - | Element | 见下边示例 | 加载中状态列表底部显示的内容 complete_footer | - | Element | 见下边示例 | 加载完成状态列表底部显示的内容

三、完整示例

<View>
	<SwipeList
		loading_state={'loading'}
		preview={true}
		data={[{ key: 'a' }, { key: 'b' }]}
		left_open_value={100}
		right_open_value={-100}
		left_menu={((item) => {
			return <View style={{}}><Text style={{ width: 100, backgroundColor: 'red', height: 100 }}>{JSON.stringify(item)}</Text></View>;
		})}
		body={((item) => {
			return <View style={{ backgroundColor: '#fff', height: 100, width: '100%', justifyContent: 'center', alignItems: 'center' }}><Text>{JSON.stringify(item)}</Text></View>;
		})}
		right_menu={(() => {
			return (
				<View style={{ backgroundColor: '#4b9dfa', height: 100, width: 100 }}>
					<Text>Right</Text>
					<Button title='button' onPress={() => {
						Alert.alert('123');
					}}></Button>
				</View>
			);
		})}
		loading_footer={
			<View style={{ backgroundColor: '#fff', height: 20, alignItems: 'center', justifyContent: 'center' }}><Text style={{ fontSize: 13, color: '#333' }}>正在加载中...</Text></View>
		}
		complete_footer={
			<View style={{ backgroundColor: '#fff', height: 20, alignItems: 'center', justifyContent: 'center' }}><Text style={{ fontSize: 13, color: '#333' }}>已加载全部数据</Text></View>
		}
		onEndReachedThreshold={0.1}
		onEndReached={() => {
			setTimeout(() => {
				this.setState({
					data: [{ name: 'a' }, { name: 'b' }, { name: 'c' }, { name: 'd' }, { name: 'e' }, { name: 'f' }, { name: 'g' }, { name: 'h' }, { name: 'i' }, { name: 'j' }, { name: 'k' }, { name: 'l' }, { name: 'm' }, { name: 'n' }, { name: 'o' }, { name: 'p' }],
					loading_state: 'complete'
				});
			}, 500);
		}}
	></SwipeList>
</View>