React Native Listview pozostawiając miejsce

Question

Próbuję zaimplementować listview w React Native. Wszystko było w porządku, gdy tylko wywoływałem komponent Accounts, ale od kiedy umieściłem go w NavigatorIOS, Listview pozostawia trochę miejsca przed pierwszym elementem: zobacz here i kiedy przewijam here.

Oto mój kod:

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

Czy ktoś ma jakiś pomysł, co się dzieje? Dzięki

Answer 1

Ok, znalazłem odpowiedź, zamieszczam tutaj dla każdego, kto napotka na ten sam problem.

Problem został opublikowany na Github here. Konieczne jest dodanie do ListView parametru automaticallyAdjustContentInsets={false}. Problem rozwiązany.

Answer 2

Dzieje się tak tylko wtedy, gdy masz ScrollView lub ListView z TabBarIOS. Możesz usunąć dodatkową przestrzeń u góry, jeśli umieścisz ScrollView w całości, ponieważ jego dolna część będzie ukryta pod TabBarIOS. Aby to naprawić dodaj contentInset={{bottom:49}} dopasuj wysokość do swoich potrzeb.

oto kod:

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

Answer 3

Jeśli starasz się osiągnąć w android..contentInset iOS jest specyficzny, aby poradzić sobie z tym na android trzeba ustawić właściwość wewnątrz <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Następnie w stylesheets.create

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

* Zdaję sobie sprawę, że pO jest prośbą o rozwiązanie iOS, po prostu dodając android rozwiązanie dla osób przechodzących i jeśli op DECI des on ma dość iOS