NavigatorIOS 栏和 ListView 部分之间的额外 space Header

Question

我的 NavigatorIOS 导航栏和 ListView 部分 Header:

之间有一些 space

如何删除 space？我希望 header 部分与我的导航栏齐平。

Answer 1

看起来这个 bug 是由于一些情况造成的，现在已经改变了。以前的架构是这样的：

index.ios.js 包含一个 NavigatorIOS 组件，其 InitialRoute 是一个涉及 TabBarIOS 的 Main 组件，它将基于 [=17] 呈现视图=] 或 Collections 被选中。

ListView 在这个 Home 组件中，本质上有几层深。

这是我修复它的方法：

在 index.ios.js 中，我将 NavigatorIOS 替换为 Navigator，它仍然指向 Main:

  renderScene: function(route, navigator) {
    var Component = route.component;
    return (
      <View style={styles.container}>
        <Component
          route={route}
          navigator={navigator}
          topNavigator={navigator} />
      </View>
      )
  },

  render: function() {
    return (
      <Navigator
        sceneStyle={styles.container}
        ref={(navigator) => { this.navigator = navigator; }}
        renderScene={this.renderScene}
        tintColor='#D6573D'
        barTintColor='#FFFFFD'
        titleTextColor='#D6573D'
        navigationBarHidden={true}
        initialRoute={{
          title: 'Product Kitty',
          component: Main,
        }} />
    );
  }

Main 仍然保留 TabBarIOS，但其 Home 和 Collection 的 render 方法现在呈现其自己的 NavigatorIOS 组件：

  render: function() {
    return (
      <TabBarIOS>
        <Icon.TabBarItem
          title='Home'
          selected={this.state.selectedTab === 'products'}
          iconName={'home'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'products') {
              this.setState({
                selectedTab: 'products'
              });
            } else if (this.state.selectedTab === 'products') {
              this.refs.productRef.popToTop();
            }
          }}>
          {this.renderProductView()}
        </Icon.TabBarItem>
        <Icon.TabBarItem
          title="Collections"
          selected={this.state.selectedTab === 'collections'}
          iconName={'list'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'collections') {
              this.setState({
                selectedTab: 'collections'
              });
            } else if (this.state.selectedTab === 'collections') {
              this.refs.collectionRef.popToTop();
            }
          }}>
          {this.renderCollectionView()}
        </Icon.TabBarItem>
      </TabBarIOS>
      )
  },

  renderProductView: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        tintColor='#D6573D'
        barTintColor='#FFFFFD'
        titleTextColor='#D6573D'
        ref='productRef'
        initialRoute={{
          title: 'Product Kitty',
          component: Products
        }} />
        )
  },

  renderCollectionView: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        tintColor='#D6573D'
        barTintColor='#FFFFFD'
        titleTextColor='#D6573D'
        ref='collectionRef'
        initialRoute={{
          title: 'Collections',
          component: Collections,
          passProps: {
            accessToken: this.state.accessToken
          }
        }} />
        )
  }

从此更改中，NavigatorIOS 和 ListView SectionHeader 之间的水平 space 额外像素的问题消失了：

Answer 2

检查listView Styles，如果你有样式"marginTop"，把它设为0

NavigatorIOS 栏和 ListView 部分之间的额外 space Header

Extra space between NavigatorIOS bar and ListView Section Header

react-native