ReactNative iOS中，之前已经用：
class AwesomeProject extends Component { // Initialize the hardcoded data constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ ‘王小丫’, ‘王芳’, ‘秦小刚’, ‘李小燕’, ‘郑钧’, ‘Lucia Xie’, ‘周明明’, ‘张曲’ ]) }; } render() { return ( <View style={{flex: 1, paddingTop: 20}}> <View style={styles.customerList}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <View style={styles.customerRow}> <Text style={styles.intentionLevel}>H</Text> <Text style={styles.customerName}>{rowData}</Text> <Text style={styles.intentionCar}>奥迪TTS</Text> <Text style={styles.updateTime}>2017/03/15</Text> </View> } /> </View> </View> ); } } const styles = StyleSheet.create({ navigation:{ flex: 1, paddingTop:10, height:10, backgroundColor:’#458cd3′, }, customerList:{ flex: 1, paddingTop: 30, }, customerRow:{ flex: 1, flexDirection: ‘row’, height: 30, }, intentionLevel: { paddingLeft: 10, width: 20, color: ‘red’, }, customerName: { paddingLeft: 10, width: 100, color: ‘black’, }, intentionCar: { paddingLeft: 10, width: 120, color: ‘gray’, }, updateTime:{ paddingLeft: 10, width: 120, paddingRight: 10, color: ‘#c1c4c9’, }, }); AppRegistry.registerComponent(‘AwesomeProject’, () => AwesomeProject); |
实现了效果：
现在想要对于listView的数据源，从一维数组：
[ ‘王小丫’, ‘王芳’, ‘秦小刚’, ‘李小燕’, ‘郑钧’, ‘Lucia Xie’, ‘周明明’, ‘张曲’ ] |
改为多位数组，
以便于每个row的数据都可以从对应的字段获取。
rn ListView DataSource cloneWithRows
rn listview datasource clonewithrows several dimensions
然后最把字符串的列表，改为字典的列表，就可以了：
class AwesomeProject extends Component { // Initialize the hardcoded data constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ { intentionLevel : "H", customerName : "王小丫", intentionCar : "奥迪A3进口", updateTime : "2016/12/28" }, { intentionLevel : "A", customerName : "王芳", intentionCar : "奥迪S7", updateTime : "1/1" }, { intentionLevel : "C", customerName : "秦小刚", intentionCar : "奥迪Q7", updateTime : "2/5" }, { intentionLevel : "B", customerName : "李小燕", intentionCar : "奥迪TTS", updateTime : "周三" }, { intentionLevel : "H", customerName : "郑钧", intentionCar : "奥迪Q5(进口)", updateTime : "9:15" }, { intentionLevel : "H", customerName : "Lucia Xie", intentionCar : "奥迪Q5(进口)", updateTime : "2016/12/20" }, { intentionLevel : "C", customerName : "司马相如", intentionCar : "奥迪Q5(进口)", updateTime : "2/20" }, { intentionLevel : "C", customerName : "张曲", intentionCar : "奥迪Q5(进口)", updateTime : "2017/2/15" }, { intentionLevel : "O", customerName : "赵平", intentionCar : "奥迪Q5(进口)", updateTime : "昨天" }, ]) }; } render() { return ( <View style={{flex: 1, paddingTop: 20}}> <View style={styles.customerList}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <View style={styles.customerRow}> <Text style={styles.intentionLevel}>{rowData.intentionLevel}</Text> <Text style={styles.customerName}>{rowData.customerName}</Text> <Text style={styles.intentionCar}>{rowData.intentionCar}</Text> <Text style={styles.updateTime}>{rowData.updateTime}</Text> </View> } /> </View> </View> ); } } const styles = StyleSheet.create({ navigation:{ flex: 1, paddingTop:10, height:10, backgroundColor:’#458cd3′, }, customerList:{ flex: 1, paddingTop: 30, }, customerRow:{ flex: 1, flexDirection: ‘row’, height: 30, }, intentionLevel: { paddingLeft: 10, width: 20, color: ‘red’, }, customerName: { paddingLeft: 10, width: 100, color: ‘black’, }, intentionCar: { paddingLeft: 10, width: 120, color: ‘gray’, }, updateTime:{ paddingLeft: 10, width: 120, paddingRight: 10, color: ‘#c1c4c9’, }, }); AppRegistry.registerComponent(‘AwesomeProject’, () => AwesomeProject); |
效果：
【总结】
ReactNative中，之前是一维数组是：
this.state = { dataSource: ds.cloneWithRows([ ‘王小丫’, ‘王芳’, ‘秦小刚’, ‘李小燕’, ‘郑钧’, ‘Lucia Xie’, ‘周明明’, ‘张曲’ ]) }; } render() { return ( <View style={{flex: 1, paddingTop: 20}}> <View style={styles.customerList}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <View style={styles.customerRow}> <Text style={styles.intentionLevel}>H</Text> <Text style={styles.customerName}>{rowData}</Text> <Text style={styles.intentionCar}>奥迪TTS</Text> <Text style={styles.updateTime}>2017/03/15</Text> </View> } /> </View> |
想要改为多维数组，直接用字典的列表，即可：
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ { intentionLevel : "H", customerName : "王小丫", intentionCar : "奥迪A3进口", updateTime : "2016/12/28" }, { intentionLevel : "A", customerName : "王芳", intentionCar : "奥迪S7", updateTime : "1/1" }, 。。。 { intentionLevel : "O", customerName : "赵平", intentionCar : "奥迪Q5(进口)", updateTime : "昨天" }, ]) }; } render() { return ( <View style={{flex: 1, paddingTop: 20}}> <View style={styles.customerList}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <View style={styles.customerRow}> <Text style={styles.intentionLevel}>{rowData.intentionLevel}</Text> <Text style={styles.customerName}>{rowData.customerName}</Text> <Text style={styles.intentionCar}>{rowData.intentionCar}</Text> <Text style={styles.updateTime}>{rowData.updateTime}</Text> </View> } /> </View> </View> ); } |
即可。