反应原生Listview留下空间

我试图在React Native中实现一个listview。 一切都很好,当我只是调用组件Accounts但是因为我把它放到一个NavigatorIOS列表视图在第一个项目之前留下一些空间:看到这里 ,当我在这里滚动。

这是我的代码:

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

有谁知道发生了什么事? 谢谢

好吧,我find了答案,我在这里发布给任何遇到同样问题的人。

Github上发布了一个问题。 有必要automaticallyAdjustContentInsets={false}添加到ListView的参数automaticallyAdjustContentInsets={false} 。 问题解决了。

这只有当你有一个带有TabBarIOS的ScrollView或ListView时才会发生。 您可以删除顶部的额外空间,如果您将automaticallyAdjustContentInsets={false}

但是,ScrollView将不会完全显示,因为它的底部将隐藏在TabBarIOS下。 要解决此问题,请添加contentInset={{bottom:49}}根据您的需要调整高度。

这里是代码:

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

如果你正试图在android.contentInset中实现这个function,那么你需要在<ListView contentContainerStyle={styles.contentContainer}> </ListView>设置属性,

然后在你的stylesheets.create

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

*我意识到,操作系统是要求一个iOS解决scheme,只是添加android解决scheme的人通过,如果op决定他厌倦了iOS