react-native listview一些行不显示

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缺陷有关。