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
3 réponses
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}
>
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
}