React Native Listview 留下空间答案

【问题标题】：React Native Listview leaving spaceReact Native Listview 留下空间
【发布时间】：2015-06-12 07:31:23
【问题描述】：

我正在尝试在 React Native 中实现一个列表视图。当我只是调用组件Accounts 时一切都很好，但是由于我将它放入 NavigatorIOS，Listview 在第一项之前留下了一些空间：请参阅here 和滚动here。

这是我的代码：

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

有人知道发生了什么吗？谢谢

【问题讨论】：

您需要使用简化的测试用例来编辑您的答案。目前有很多无关的信息阻止我们解决问题。将其减少到重现问题的最低限度。
我认为我不应该为此获得-1 ...好吧，我实际上放置了Listview和NavigatorIOS的所有代码，因为我不知道错误来自哪里。是“CSS”还是“JS”代码？我会尝试删除一些代码

标签： javascript ios listview react-native

【解决方案1】：

如果你想在 android..contentInset 中实现这一点是 iOS 特定的，要在 android 上管理它，你需要在 <ListView contentContainerStyle={styles.contentContainer}> </ListView> 中设置属性

然后在你的 stylesheets.create 中

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

* 我意识到 op 要求的是 iOS 解决方案，只是为路过的人添加 android 解决方案，如果 op 认为他厌倦了 iOS

【讨论】：

【解决方案2】：

只有当你有一个带有 TabBarIOS 的 ScrollView 或 ListView 时才会发生这种情况。如果您输入automaticallyAdjustContentInsets={false}，您可以删除顶部的多余空间

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

代码如下：

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

【讨论】：

我也有间距没有TabBarIOS

【解决方案3】：

好的，我找到了答案，我在这里发布给遇到相同问题的任何人。

在 Github here 上发布了一个问题。需要在ListView 中添加参数automaticallyAdjustContentInsets={false}。问题解决了。

【讨论】：