listview - react native ListView 某些行不显示

Question

我有一个带有 3 个选项卡的模式。每个选项卡都有一个 ListView ，任何大于 10 行的数据集都无法正常工作。发生的情况是在初始加载时它正确显示。然而，当显示更多行时，它们都是空的。不知道发生了什么事。使用最新的 React-Native。如果有帮助的话，这里有一些屏幕截图。

 <View style={{flex:1, height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}>
    {
      (this.state.isSubdivisions) ? <Subdivisions model={this.props.model.subdivisions}/>
      : (this.state.isProspects) ? <LandProspects model={this.props.model.landProspects}/>
      : (this.state.isFavorites) ? <Favorites model={this.props.model.favorites}/>
      : null}
</View>

标签

class ListLandProspects extends Component {
  constructor(props) {
    super(props);
    const foo = this.props.model.slice(0,10)
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      dataSource: ds.cloneWithRows(foo),
      deviceHeight: Dimensions.get('window').height,
      deviceWidth: Dimensions.get('window').width
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.model != prevProps.model)
    this._updateLandProspects()
  }

  _updateLandProspects(){
    const clone = this.props.model.slice()
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(clone)
    })
  }

  render() {
    return (
      <Row>
        <Col>
          <List>
            <ListView
              style={{ height: this.state.visibleHeight - 100, width: this.state.visibleWidth }}
              enableEmptySections={true}
              initialListSize={10}
              pageSize={10}
              dataSource={this.state.dataSource}
              renderRow={this._renderRow.bind(this)} />
          </List>
        </Col>
      </Row>
    )
  }

  _renderRow(rowData) {
    return (
      <ListItem style={styles.listItem}>
        <View style={styles.rowWrapper}>
          <Row>
            <Col>
              <Text style={styles.labelMain}>{rowData.fullAddress}</Text>
            </Col>
          </Row>
          <Row style={styles.toolbarRow}>
            <View style={styles.toolbarDetail}>
              <TouchableOpacity>
                <Icon
                  name='ios-information-circle'
                  style={{color: colors.blue}}/>
              </TouchableOpacity>
            </View>
            <View style={styles.toolbarMarker}>
              <TouchableOpacity>
                <Icon
                  name='ios-pin'
                  style={{color: colors.green}}/>
              </TouchableOpacity>
            </View>
            <View style={styles.toolbarFavorite}>
              <TouchableOpacity>
                <Icon
                  name={rowData.isFavorite ? 'ios-star' : 'ios-star-outline'}
                  style={{color: colors.orange}}/>
              </TouchableOpacity>
            </View>
          </Row>
        </View>
      </ListItem>
    )
  }
}


ListLandProspects.propTypes = {
  model: React.PropTypes.array
}

export default connect(null, null)(ListLandProspects)

样式

const styles = StyleSheet.create({
  label: {
    color: '#000',
    fontWeight: 'bold'
  },
  labelMain: {
    color: '#000',
    fontWeight: 'bold',
    fontSize: 15
  },
  rowWrapper: {
    padding: 5,
    paddingLeft: 10,
    paddingRight: 10
  },
  listItem: {
    padding: 0,
    marginLeft: 0,
    paddingLeft: 0,
    borderBottomWidth: 0,
    borderColor: 'transparent'
  },
  toolbarRow: {
    height: 38,
    marginTop: 5,
    backgroundColor: '#f2f2f2'
  },
  toolbarFavorite: {
    position: 'absolute',
    margin: 5,
    left: 110
  },
  toolbarMarker: {
    position: 'absolute',
    margin: 5,
    left: 60
  },
  toolbarDetail: {
    position: 'absolute',
    margin: 5

  }
})

Answer 1

any dataset larger than 10 rows does not work properly

几乎肯定与这一行有关:

const foo = this.props.model.slice(0,10)

编辑:

我认为您的 componentDidUpdate 有缺陷。 this.props.model != prevProps.model 将始终为 true，因为您无法像这样比较数组。因此，_updateLandProspects 将在每次更新时被调用，这将重新设置您的状态，并且由于您的 initialListSize 为 10，您可能永远不会看到的数量超过这个数字，因为它将导致一遍又一遍地另一次渲染。

尝试将 initialListSize 更改为更大的数字，并删除上面的 slice(0, 10) ，看看它的行为是否与现在相同，但具有更大的数字。这应该显示问题是否与 componentDidUpdate 缺陷有关。