如何確保元素不會疊加在原生反應中？

Question

現在我有一個react-native-elements-header與react-native-snap-carousel包裹在一個簡單的容器如下：

render() { 
    return (
     <View style={styles.container}> 
     <Header 
      outerContainerStyles={styles.header} 
      leftComponent={ 
      <Text style={styles.heading}>{this.state.title}</Text> 
      } 
      rightComponent={ 
      <Icon 
       name='account-circle' 
       color={COLOR_LIGHT_SECONDARY} 
       onPress={() => this.props.navigation.navigate('Settings')} /> 
      } 
     /> 
     {this.cardCarousel} 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    icon: { 
    width: 26, 
    height: 26, 
    }, 
    container: { 
    flex: 1, 
    backgroundColor: "white", 
    }, 
    containerCentered: { 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    header: { 
    //flex: 2, 
    height: '15%', 
    }, 
    heading: { 
    fontSize: TITLE, 
    fontWeight: 'bold', 
    color: THEME_COLOR, 
    }, 
    card: { 
    backgroundColor: THEME_COLOR 
    } 
}); 

和this.cardCarousel返回與分頁旋轉木馬：

get cardCarousel() { 
    const { activeSlide, entries } = this.state; 
    var phoneWidth = Dimensions.get('window').width; 

    return (
     <View style={styles.containerCentered}> 
     <Carousel 
      ref={(c) => { this._carousel = c; }} 
      data={entries} 
      renderItem={this._renderItem} 
      sliderWidth={phoneWidth} 
      itemWidth={phoneWidth*0.85} 
     /> 

     <Pagination 
      dotsLength={this.state.entries.length} 
      activeDotIndex={activeSlide} 
      containerStyle={{}} 
      dotStyle={{ 
       width: 8, 
       height: 8, 
       borderRadius: 4, 
       marginHorizontal: 0, 
       backgroundColor: THEME_COLOR 
      }} 
      inactiveDotStyle={{ 
       // Define styles for inactive dots here 
      }} 
      inactiveDotOpacity={1} 
      inactiveDotScale={0.6} 
     /> 
     </View> 
    ); 
    } 

但是cardCarousel被覆蓋在header的頂部。我已經嘗試了很多容器和容器的道具，但cardCarousel總是覆蓋標題，並且從頂部對齊。我在這裏做錯了什麼？我還附上了一個截圖如下：

Answer 1

react-native-elements-header是絕對定位的元素，因爲頭部被絕對定位旋轉木馬被渲染在頭部頂部。 檢查這一次 https://github.com/react-native-training/react-native-elements/blob/8d4f85890bc37da64fa9712b166a92dd13b2e0a3/src/header/Header.js

<Header 
     outerContainerStyles={styles.header} 
     leftComponent={ 
     <Text style={styles.heading}>{this.state.title}</Text> 
     } 
     rightComponent={ 
     <Icon 
      name='account-circle' 
      color={COLOR_LIGHT_SECONDARY} 
      onPress={() => this.props.navigation.navigate('Settings')} /> 
     } 
    /> 

所以給相對的頭outerContainerStyles位置。

<Header 
    outerContainerStyles={{position: "relative", height: "15%"}} 
    leftComponent={ 
    <Text style={styles.heading}>{this.state.title}</Text> 
    } 
    rightComponent={ 
    <Icon 
     name='account-circle' 
     color={COLOR_LIGHT_SECONDARY} 
     onPress={() => this.props.navigation.navigate('Settings')} /> 
    } 
/>