ghost60 / react-native-list-show

react-native-list-show

效果

demo

import List from 'react-native-list-show'
//...
const option = {
	avatorUri: 'avatorUri',
	left: 'name',
	right: 'age',
	onPress: {
    	key: 'name',
    	func: (e) => Alert.alert(e)
  	}
}
const option = {
	avatorUri: 'avatorUri',
	right: 'age',
	left: {
	key: ['m', 'n'],
	render: (m, n) => {
        return (
        <View style={{ flexDirection: 'column', alignContent: 'center', justifyContent: 			'center', alignItems: 'center' }}>
            <Text style={{ color: Color_Black_T1 }}>{m}</Text>
            <Text style={{ color: Color_Black_T1 }}>{n}</Text>
        </View>
        )
	},
	onPress: {
		key: 'name',
		func: (e) => Alert.alert(e)
	}
}
const dataSource = [
  { name: 'aa', age: 'cc', m:'m', n:'n' avatorUri: require('../avator1.jpg') },
  { name: 'bb', age: 'cc', m:'m', n:'n' avatorUri: require('../avator2.jpg') },
  { name: 'cc', age: 'cc', m:'m', n:'n' avatorUri: require('../avator3.jpg') },
  { name: 'dd', age: 'cc', m:'m', n:'n' avatorUri: require('../avator4.jpg') }
]

<List option={option} dataSource={dataSource} style={{ backgroundColor: Color_White }} />

Props

props	items	describe
options	无（必须）（object）	配置项
dataSource	无（必须）（array）	数据
avator	false（bool）	头像
arrow	false（bool）	右侧箭头
underLine	true（bool）	分割线
style	无（非必须）（object）	样式

options

options	items	describe
left	仅展示文字时，只需写对应数据里的字段，展示自定义组件时，有两项，1、key，对应数据中字段，string or array : 'name' or ['name','age']。2、render：自定义展示内容，	列表左侧信息
right	同left
avatorUri	头像图片URI
onPress	列表行点击事件