【已解决】ReactNative中实现实现ListView的数据源是多维数组

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

[ReactNative] ListView.DataSource doesn’t work with ObservableArrays · Issue #476 · mobxjs/mobx · GitHub

然后最把字符串的列表,改为字典的列表,就可以了:

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>
      );
    }

即可。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量