React Native Listview lasciando spazio

Question

Sto cercando di implementare un listview in React Native. Tutto andava bene quando stavo chiamando il componente Accounts ma da quando l'ho inserito in un NavigatorIOS, Listview lascia uno spazio prima del primo elemento: vedere here e quando si scorre here.

Ecco il mio codice:

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

Qualcuno ha idea di cosa sta succedendo? Grazie

Answer 1

Ok, ho trovato la risposta, la posta qui per chiunque si imbattesse nello stesso problema.

Un problema è stato pubblicato su Github here. È necessario aggiungere al parametro ListView il parametro automaticallyAdjustContentInsets={false}. Problema risolto.

Answer 2

Ciò si verifica solo quando si dispone di un oggetto ScrollView o ListView con TabBarIOS. È possibile rimuovere lo spazio aggiuntivo nella parte superiore se si inserisce automaticallyAdjustContentInsets={false}

Tuttavia, ScrollView non verrà visualizzato completamente perché la porzione inferiore di essa sarà nascosta sotto TabBarIOS. Per risolvere questo problema aggiungi contentInset={{bottom:49}} regolando l'altezza in base alle tue esigenze.

ecco il codice:

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

Answer 3

Se si sta cercando di raggiungere questo obiettivo in android..contentInset è iOS specifici, per gestire questo su Android è necessario impostare la proprietà all'interno della <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Poi, nel tuo stylesheets.create

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

* mi rendo conto che op sta chiedendo una soluzione iOS, semplicemente aggiungendo la soluzione android per persone di passaggio e se op deci È stufo di iOS