Question

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

我注意到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}的Tab导航器的图标应该在组件中可用，如react-navigation的{{1}}以及createMaterialTopTabNavigator的文档中所示，我不确定我是在做错什么，还是由于某种原因未实现此功能。

Answer 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>
  );
};

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

1 个答案: