1.0.0 • Published 5 years ago

react-native-list-show v1.0.0

Weekly downloads
6
License
ISC
Repository
github
Last release
5 years ago

效果

npm.io

npm.io

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

propsitemsdescribe
options无(必须)(object)配置项
dataSource无(必须)(array)数据
avatorfalse(bool)头像
arrowfalse(bool)右侧箭头
underLinetrue(bool)分割线
style无(非必须)(object)样式

options

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