react-native - 使用组件 react-native react-native-router-flux 包裹场景选项卡

Question

我有一个呈现的 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>
    )

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

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