web-dev-qa-db-fra.com

React Native Listview laissant de l'espace

J'essaye d'implémenter une listview en React Native. Tout allait bien quand je venais d'appeler le composant Accounts mais depuis que je l'ai mis dans un NavigatorIOS, Listview laisse un peu espace avant le premier élément: voir ici et quand je défile 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,
  },
});

accounts.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'
  },
})

Quelqu'un a-t-il une idée de ce qui se passe? Merci

javascriptioslistviewreact-native
40
ilansas

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

Un problème a été publié sur Github ici . Il faut ajouter au ListView le paramètre automaticallyAdjustContentInsets={false}. Problème résolu.

87
ilansas

Cela se produit uniquement lorsque vous disposez d'un ScrollView ou ListView avec TabBarIOS. Vous pouvez supprimer l'espace supplémentaire en haut si vous mettez automaticallyAdjustContentInsets={false}

Cependant, le ScrollView ne sera pas complètement affiché, car la partie inférieure de celui-ci sera masquée sous TabBarIOS. Pour résoudre ce problème, ajoutez contentInset={{bottom:49}} ajustez la hauteur selon vos besoins.

voici le code:

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

Si vous essayez de réaliser cela dans Android..contentInset est spécifique à iOS, pour gérer cela sur Android vous devez définir la propriété à l'intérieur de <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Ensuite, dans vos feuilles de style.créer

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

* Je me rends compte qu'op demande une solution iOS, ajoutant simplement la solution Android pour les personnes qui passent et si op décide qu'il en a marre d'iOS)

8
TomTom