反应原生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