1

我有一个呈现的 tabbar 组件,我想在其中包装一个自定义本机模块,以实现 react 的 css 中不可用的自定义样式行为(线性不透明度渐变。)

  <Scene key="video" tabs={true} tabBarStyle={styles.tabBarStyle}>
    <Scene key="profile" title="profile" component={MyProfile} icon={TabIcon} hideNavBar />
    <Scene key="trend" title="trend" component={TrendMenuScene} icon={TabIcon} hideNavBar />
    <Scene key="home" title="home" component={MainMenuScene} initial icon={TabIcon} hideNavBar />
    <Scene key="star" title="star" component={Favourite} icon={TabIcon} hideNavBar />
    <Scene key="discover" title="discover" component={Search} icon={TabIcon} hideNavBar />
  </Scene>

我的第一个尝试和想法是将组件属性添加到包装场景组件的顶层。该组件内部可能类似于。

return (
        <LinearGradient key="gradientWrap" colors={['transparent', 'rgba(0, 0, 0, 0.5)']} style={styles.linearGradient}>
        {this.props.children}
        </LinearGradient>
    )

这不起作用并引发错误。我尝试过克隆道具,但我将所有内容都包裹起来,整个页面都包裹在线性渐变中:/

那么如何在线性渐变中只包裹标签栏呢?或更一般地说,任何包装组件。

4

0 回答 0