Дополнительное пространство между NavigatorIOS бар и ListView Раздел заголовка

Question

У меня есть некоторое пространство между моей NavigatorIOS панели навигации и мой ListView Раздел Заголовок:

Как я могу удалить это пространство? Я хотел бы, чтобы заголовок секции был на одном уровне с моей навигационной панелью.

Answer 1

Похоже, эта ошибка возникла из-за нескольких обстоятельств, которые с тех пор были изменены. Вот как бывшая архитектура была:

index.ios.js содержал NavigatorIOS компонент которого InitialRoute был Main компонента с участием TabBarIOS который будет оказывать представление на основе либо HomeCollections или выбраны.

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, но его render методы как Home и Collection прямо сейчас сделать свои собственные 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 исчезли:

Answer 2

Проверьте ListView Styles, если у вас есть стиль «MarginTop», сделать его 0