将zIndex设置为组件

时间:2018-09-26 08:26:18

标签: react-native flexbox z-index

我确实有这种布局,直到我将zIndex添加到scrollView中,一切正常为止,标题消失了,试图赋予它比组件不起作用的更大的zIndex,我如何使此scrollView在顶部图片

navBar

renderNavBar() {
  return (
    <Header
      backgroundColor={'rgba(0,0,0, 0.3)'}
      statusBarProps={{ barStyle: 'light-content' }}
      leftComponent={{ icon: 'menu', color: '#FFF' }}
      centerComponent={{ text: 'ChordHawk', style: { color: '#fff' } }}
      outerContainerStyles={{ minHeight: 0, borderBottomWidth: 0, paddingTop: 25, zIndex: 100000}}
    />
  );
}

内容

renderContent() {
  return (
<View style={{borderRadius: 20, backgroundColor: '#eee'}}>
<Text style={{fontSize: 16, padding: 50}}>Ingeniis e quibusdam, et irure elit hic fabulas in enim litteris coniunctione se
in export nostrud despicationes, ab est eram constias sed mandaremus labore
possumus nam elit doctrina ea despicationes do eu quo dolor occaecat. E constias
ea aliquip.</Text>
</View>
  );
}

主视图(这是第三方库)

render() {
  return (
      <View style={styles.container}>
        <ReactNativeParallaxHeader
          headerMinHeight={70}
          headerMaxHeight={500}
          extraScrollHeight={0}
          backgroundImage={viewImages.background}
          backgroundImageScale={1.0}
          navbarColor={'#168eea'}
          renderNavBar={this.renderNavBar}
          renderContent={this.renderContent}
        />
      </View>
    );
  }

我像这样调整源文件:

  scrollView: {
    flex: 1,
    backgroundColor: 'transparent',
    position: 'relative',
    overflow: 'hidden',
    marginTop: -50,
    zIndex: 1000
  },

我的目标是将那些圆角放置在图像背景的顶部,现在的问题是,滚动视图位于其他所有内容的顶部,有人可以帮忙吗

0 个答案:

没有答案