Question

我有一个带有3个标签的模态。每个选项卡都有一个列表视图，任何大于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

任何大于10行的数据集都无法正常工作

几乎肯定与这一行有关：

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

编辑：

我认为你的componentDidUpdate存在缺陷。 this.props.model != prevProps.model始终为true，因为您无法比较这样的数组。因此，每次更新都会调用_updateLandProspects，这会重新设置您的状态，因为您有initialListSize 10，您可能永远不会看到超过该数字的更新会一遍又一遍地造成另一个渲染。

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

react-native listview一些行不显示

1 个答案: