React Native Listview quitter l'espace

j'essaie d'implémenter une listview dans React Native. Tout allait bien quand j'appelais le composant Accounts mais depuis que je L'ai mis dans un NavigatorIOS le Listview laisse de la place avant le premier élément : voir ici et quand je scroll ici.

Voici mon code :

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,
  },
});

comptes.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}></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'
  },
})

est-ce quelqu'un a une idée de ce qui est allez sur ? Merci

38
demandé sur ilansas 2015-04-07 19:04:41

3 réponses

Ok donc, j'ai trouvé la réponse, je la poste ici pour tous ceux qui rencontrent le même problème.

un numéro a été posté sur Github ici . Il est nécessaire d'ajouter à l' ListView le paramètre automaticallyAdjustContentInsets={false}. Le Problème Est Résolu.

87
répondu ilansas 2015-04-08 08:48:02

cela n'arrive que lorsque vous avez un ScrollView ou un ListView avec des TabBarIOS. Vous pouvez supprimer l'espace supplémentaire dans le haut si vous mettez automaticallyAdjustContentInsets={false}

cependant, le ScrollView ne sera pas complètement affiché car la partie inférieure sera cachée sous les TabBarIOS. Pour résoudre ce ajouter contentInset={{bottom:49}} ajuster la hauteur selon vos besoins.

voici le code:

<ListView
  contentInset={{bottom:49}}
  automaticallyAdjustContentInsets={false}
>
32
répondu drikoda 2015-05-22 23:54:29

si vous essayez d'atteindre ce dans android..contententinset est iOS spécifique, pour gérer cela sur android, vous devez définir la propriété à l'intérieur de <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Puis dans vos feuilles de style.créer

var styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: 100 
  }
8
répondu TomTom 2016-08-09 22:51:46