react-native-list-show

效果

yarn add react-native-list-show

import List from 'react-native-list-show'

demo

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	列表行点击事件