javascript - icon - react native elements

React Native Listview dejando espacio

Question

Estoy tratando de implementar una vista de lista en React Native. Todo estaba bien cuando estaba llamando al componente Accounts pero como lo puse en un NavigatorIOS, Listview deja algo de espacio antes del primer elemento: mira here y cuando me desplazo here .

Aquí está mi código:

index.ios.js

var RemoteX1 = React.createClass({

  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: ''Accounts'',
          component: Accounts,
        }}/>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

cuentas.js

var people = [
  {
    title: "Papa",
    favouriteChannels: []
  },
  {
    title: "Maman",
    favouriteChannels: []
  },
  {
    title: "Kids",
    favouriteChannels: []
  },
  {
    title: "Invité",
    favouriteChannels: []
  }
];

var Accounts = React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(people),
    }
  },
  renderRow: function(person) {
    return (
      <TouchableHighlight onPress={this.onPressRow}>
        <Text style={styles.account}>{person.title}</Text>
      </TouchableHighlight>
    );
  },
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.panel}>
          <Text style={styles.icon}>&#xF0C6;</Text>
          <Text style={styles.welcome}>BIENVENUE</Text>
          <ListView 
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            style={styles.listView} />
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: ''center'',
    justifyContent: ''center''
  },
  panel: {
    backgroundColor: ''#67F072'',
    alignItems: ''center'',
    justifyContent: ''center'',
    paddingLeft: 50,
    paddingRight: 50,
  },
  icon: {
    color: ''#67B7F0'',
    fontFamily: ''CanalDemiRomainG7'',
    fontSize: 40
  },
  welcome: {
    color: ''#67B7F0'',
    fontFamily: ''CanalDemiRomainG7''
  },
  account: {
    color: ''#000000'',
    height: 30,
    alignSelf: ''center'',
    fontFamily: ''CanalDemiRomainG7''
  },
})

¿Alguien tiene alguna idea de lo que está pasando? Gracias

Answer 1

Esto solo ocurre cuando tienes ScrollView o ListView con TabBarIOS. Puede eliminar el espacio adicional en la parte superior si coloca automaticallyAdjustContentInsets={false}

Sin embargo, ScrollView no se mostrará por completo, ya que la parte inferior se ocultará debajo de TabBarIOS. Para solucionar esto, agregue contentInset={{bottom:49}} ajuste la altura de acuerdo a sus necesidades.

aquí está el código:

<ListView
  contentInset={{bottom:49}}
  automaticallyAdjustContentInsets={false}
>

Answer 2

Ok, entonces encontré la respuesta, la publico aquí para cualquier persona que se encuentre con el mismo problema.

Se ha publicado un problema en Github here . Es necesario agregar al ListView el parámetro automaticallyAdjustContentInsets={false} . Problema resuelto.

Answer 3

Si está tratando de lograr esto en Android ... <ListView contentContainerStyle={styles.contentContainer}> </ListView> es iOS específico, para administrar esto en Android necesita establecer la propiedad dentro de <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Luego en tus stylesheets.create

var styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: 100 
  }

* Me doy cuenta de que op está pidiendo una solución de iOS, simplemente agregando la solución de Android para la gente que pasa y si op decide que está harto de iOS