是否可以在 React Native Router Flux 的顶部选项卡导航器中添加图标？答案

【问题标题】：Is it possible to add an icon to top tab navigator in React Native Router Flux?是否可以在 React Native Router Flux 的顶部选项卡导航器中添加图标？
【发布时间】：2019-11-03 23:29:49
【问题描述】：

我想在react-native-router-flux 的<Tabs></Tabs> 组件中为每个场景（选项卡）添加一个图标。

我注意到图标确实在tabBarPosition="bottom" 时显示。

我的代码如下所示：

<Stack>
  <Tabs tabBarPosition="top">
    <Scene icon={({focused}) => (
      <Icon name="star" />
    )} hideNavBar />
    <Scene icon={({focused}) => (
      <Icon name="audiotrack" />
    )} initial hideNavBar />
    <Scene icon={({focused}) => (
      <Icon name="album" />
    )} hideNavBar />
 </Tabs>
</Stack>

（请注意，我只包含与我的问题相关的代码，没有其他内容）

tabBarPosition={true} 的选项卡导航器的图标应该在组件中可用，正如react-navigation 的createMaterialTopTabNavigator 以及react-native-router-flux 的文档中所示，我不确定我是否做错了什么，或者这个功能没有实现是有原因的。

【问题讨论】：

标签： android reactjs react-native react-native-router-flux

【解决方案1】：

是的，它通过在标签场景中添加以下道具对我有用

<Scene
  key="mainScreen"
  tabs
  initial
  tabBarPosition='top'
  lazy
  showIcon // here
  showLabel={false} // here
>
  <Scene
    wrap={false}
    hideNavBar
    key="hey"
    component={Events}
    icon={({ focused }) => <IconContainer />}
  />
</Scene >

// IconContainer Component
const IconContainer = () => {
  return (
    <View
      style={{
        alignItems: 'center',
        justifyContent: 'center',

      }}
    >
      <Icon name='name-of-the-icon' size={15} />
    </View>
  );
};

【讨论】：