A react-native card list write in js
npm install @remobile/react-native-card-list --save
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
StyleSheet,
View,
Text,
Dimensions,
} = ReactNative;
var CardList = require('@remobile/react-native-card-list');
var {width, height} = Dimensions.get('window');
var LIST = [
{color: 'red'},
{color: 'blue'},
{color: 'darkgray'},
{color: 'pink'},
{color: 'green'},
{color: 'yellow'},
{color: 'red'},
{color: 'blue'},
{color: 'darkgray'},
{color: 'pink'},
{color: 'green'},
{color: 'yellow'},
{color: 'red'},
{color: 'blue'},
{color: 'darkgray'},
{color: 'pink'},
{color: 'green'},
{color: 'yellow'}
];
module.exports = React.createClass({
onClickCard(i) {
Toast(i+'');
},
renderRow(data, i, width, height) {
return (
<View style={{width, height, backgroundColor:data.color, alignItems:'center'}}>
<Text>{i}</Text>
</View>
)
},
render() {
return (
<View style={styles.container}>
<CardList
list={LIST}
renderRow={this.renderRow}
height={300}
panelHeight={height-100}
panelWidth={width-100}
offsetTop={50}
offsetLeft={50}
onClickCard={this.onClickCard}/>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
padding: 50,
},
});
list: PropTypes.list
card data listheight: PropTypes.number
card item heightpanelHeight: propTypes.number
card container heightpanelWidth: PropTypes.number
card container widthoffsetTop: PropTypes.number
card container top offset of screenoffsetLeft: PropTypes.number
card container left offset of screenonClickCard: PropTypes.func [args: i]
the callback of click card, args i is card index of clicked cardrenderRow: PropTypes.func [args: data, i, width, height]
row render function