reagieren-native Listview einige Zeilen nicht angezeigt

Question

Ich habe ein Modal mit 3 Registerkarten. Jede Registerkarte hat eine Listenansicht, ein Datensatz mit mehr als 10 Zeilen funktioniert nicht ordnungsgemäß. Was passiert, wird beim ersten Laden korrekt angezeigt. Wenn jedoch mehr Zeilen angezeigt werden, sind sie alle leer. Nicht sicher, was vor sich geht. Verwenden der neuesten React-Native. Hier sind ein paar Screenshots, wenn es hilft.

<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> 

Tab

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) 

Styles

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

jede Datenmenge größer als 10 Zeilen nicht richtig funktioniert

Mit ziemlicher Sicherheit auf dieser Linie bezogen werden:

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

EDIT:

Ich denke, Ihre componentDidUpdate fehlerhaft ist. this.props.model != prevProps.model wird immer true sein, weil Sie solche Arrays nicht vergleichen können. So wird _updateLandProspects bei jedem Update aufgerufen werden, die Ihren Status zurücksetzen und da Sie eine initialListSize von 10 haben, werden Sie wahrscheinlich nie mehr als diese Zahl sehen, da es immer wieder zu einem anderen Rendern führen wird.

Versuchen Sie initialListSize zu einer größeren Zahl zu ändern und entfernen Sie die slice(0, 10) oben und sehen Sie, ob es sich genauso verhält wie jetzt, aber mit dieser größeren Zahl. Dies sollte zeigen, ob das Problem mit dem componentDidUpdate Fehler oder nicht ist.