如何在 React Native Router Flux 的标签栏上添加一个虚拟图标？

Question

我的客户想在标签栏中间添加公司标志。但它只是一个图像，没有分配任何页面。这意味着当您点击徽标时，这应该什么都不做。

问题是：使用 React Native Router Flux，选项卡栏的每个项目都应附加到一个组件，单击将导航到该组件。

如何在不执行任何操作的标签栏上添加图片？

            <Tabs
                tabs={true}
                initial
                tabBarStyle={{ backgroundColor: 'red' }}
                showLabel={false}>
                <Scene key='timer' hideNavBar={true} title='Timer' icon={TabIcon} component={Timer} />
                <Scene key='settings' component={Settings} title='Settings' icon={TabIcon} />
                <Scene key='LOGO' icon={TabIcon} /> --> It's not possible
                <Scene key='graph' component={Graph} title='Graph' icon={TabIcon} />
            </Tabs>

Answer 1

您可以通过 tabBarComponent 传递给 Tabs 自定义底部栏道具

这是 git 集线器上的示例：https://github.com/Tabakharniuk/-react-native-examples-expo/tree/react-native-router-flux-custom-bottom-tab-navigator

这里是 CustomTabBar 组件代码示例：

class CustomTabBar extends React.PureComponent {
  render() {
    const { state, navigate } = this.props.navigation;
    const activeTabIndex = state.index;

    return (
      <View style={styles.container}>
        {state.routes.map(({
          key, routes,
        }, index) => {
          const Icon = routes[0].params.icon;
          const { title } = routes[0].params;
          const isActive = activeTabIndex === index;

          if (key === 'LOGO') {
            return <YourLogoComponent />;
          }

          return (
            <TouchableOpacity key={key} onPress={() => navigate(key)} style={styles.tabItem}>
              <Icon isActive={isActive} />
              <Text style={isActive ? styles.labelActive : styles.label}>{title}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

希望对您有所帮助。

如何在 React Native Router Flux 的标签栏上添加一个虚拟图标？

How to add a dummy icon on the tab bar of React Native Router Flux?

react-native

react-native-router-flux