react-navigation定制TabNavigator生成的组件

Question

使用react-navigation，以实现此目的：

我在TabNavigator内嵌套StackNavigator。代码如下：

const HomeTabs = TabNavigator(
  {
    Portfolio: { screen: PortfolioScreen },
    Holding: { screen: HoldingScreen }
  },
  {
    //other configs
  }
)

const RootNavigator = StackNavigator(
  {
    Home: { screen: HomeScreen },
  },
  {
    // other configs
  }
)

//in App.js render()
return (
  <Provider store={Store}>
    <View style={{flex: 1}}>
      <RootNavigator />
    </View>
  </Provider>
)

现在，我需要在Portfolio和Holding选项卡上使用浮动操作按钮。我不想在PortfolioScreen和HoldingScreen组件中添加两次。

有没有办法可以自定义TabNavigator生成的HomeTabs组件？喜欢给它渲染额外的东西？我缺少一个HOC API吗？类似的东西：

class CustomizedHomeTabs extends React.Component {
  onFabPress = () => { // do stuffs }

  render() {
    return (
      <FAB onPress={this.onFabPress}></FAB>
    )
  }
}

export default withTabNavigator(routes, config)(CustomizedHomeTabs) //something like this would be cool!