Pregunta react-native listview algunas filas que no se muestran


Tengo un modal con 3 pestañas. Cada pestaña tiene una vista de lista, cualquier conjunto de datos de más de 10 filas no funciona correctamente. Lo que ocurre es que en la carga inicial se muestra correctamente. sin embargo, cuando se muestran más filas, están todas vacías. No estoy seguro de lo que está pasando. Usando la última React-Native. Aquí hay un par de capturas de pantalla si esto ayuda.

pic 1pic 2pic 3

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

Lengüeta

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)

Estilos

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

  }
})

11
2018-01-01 18:16


origen


Respuestas:


cualquier conjunto de datos de más de 10 filas no funciona correctamente

Casi seguro relacionado con esta línea:

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

EDITAR:

Creo que su componentDidUpdate Es defectuoso. this.props.model != prevProps.model siempre será true, porque no puede comparar matrices como esa. Asi que _updateLandProspects se llamará en cada actualización, que volverá a establecer su estado y ya que tiene una initialListSize de 10 probablemente nunca verá más que ese número ya que causará otro renderizado una y otra vez.

Intenta cambiar initialListSize a un número mayor y eliminar el slice(0, 10) arriba y ver si se comporta igual que ahora pero con ese número más grande. Esto debería mostrar si el problema es con el componentDidUpdate defecto o no.


2
2018-01-03 22:35