React Native Listview оставляющее пространство

Я пытаюсь реализовать listview в React Native. Все было нормально, когда я просто вызывал компонент Accounts, но поскольку я помещал его в NavigatorIOS, Listview оставляет некоторое пространство перед первым элементом: см. here и когда я прокручиваю here.React Native Listview оставляющее пространство

Вот мой код:

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

ли кто-нибудь имеет ни малейшего представления о том, что происходит? Спасибо

источник

2015-04-07 ilansas

Вам нужно отредактировать свой ответ с уменьшенным тестовым случаем. На данный момент существует много посторонней информации, которая мешает нам решить проблему. Сократите его до минимума, который воспроизводит проблему. –

Я не думаю, что заслужил -1 для этого ... Ну, я на самом деле положил весь код Listview и NavigatorIOS, потому что я не знаю, откуда эта ошибка. Это код «CSS» или «JS»? Я попытаюсь удалить код – ilansas

Итак, я нашел ответ, я разместил его здесь для всех, кто сталкивался с тем же вопросом.

Вопрос был опубликован на Github here. Необходимо добавить к ListView параметр automaticallyAdjustContentInsets={false}. Проблема решена.

источник

2015-04-08 08:48:02 ilansas

Это происходит только тогда, когда у вас есть ScrollView или ListView с TabBarIOS. Вы можете удалить дополнительное пространство наверху, если вы положили automaticallyAdjustContentInsets={false}

Однако ScrollView не будет отображаться полностью, потому что нижняя часть его будет скрыта под TabBarIOS. Чтобы исправить это, добавьте contentInset={{bottom:49}} отрегулируйте высоту в соответствии с вашими потребностями.

вот код:

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

источник

2015-05-22 23:42:27 drikoda

У меня также был интервал без 'TabBarIOS' –

Если вы пытаетесь добиться этого в android..contentInset является IOS конкретным, чтобы управлять этим на андроид вам нужно установить свойство внутри <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Затем в stylesheets.create

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

* Я понимаю, что оп прошу для решения IOS, просто добавив андроид решения для людей, проходящих и если оп дого des он сыт по горло iOS

источник

2016-08-09 22:45:21 TomTom

React Native Listview оставляющее пространство

ответ

Смежные вопросы