如何为 TabNavigator 使用 tabBarComponent？标签栏不显示答案

【问题标题】：How to use tabBarComponent for TabNavigator? Tab bar not showing如何为 TabNavigator 使用 tabBarComponent？标签栏不显示
【发布时间】：2017-12-19 08:45:48
【问题描述】：

我正在尝试制作自己的自定义标签栏，似乎 tabBarComponent 是通过设置为我自己的组件来实现的方法。使用下面的代码，我的标签栏不会出现。

const TabNav = TabNavigator({
  LaunchScreen: {
      screen: PrimaryNav,
      navigationOptions: {
        tabBarLabel:'Find',
        tabBarIcon: ({ tintColor }) => (
          <Icon name='search' size={20} color='white' />
        ),
      },
   },
}, {
  navigationOptions: {
    headerTintColor: 'grey'
  },
  tabBarComponent: FooterTabs,
  tabBarPosition: 'bottom',
  swipeEnabled:false,
  animationEnabled:false,
  lazy:true,
  tabBarOptions: {
      showIcon:true,
      showLabel:false,
      style: {
          backgroundColor: 'black'
      }
  }
});

在 FooterTabs.js 中：

export default class FooterTabs extends Component {
  render () {
    return (
      <View style={styles.container}>
        <Text>FooterTabs Component</Text>
      </View>
    )
  }
}

我错过了什么？

【问题讨论】：

标签： javascript react-native react-navigation tabnavigator

【解决方案1】：

    const TabNav = TabNavigator({
      ......,
     tabBarComponent: props => (
     <FooterTabs{...props} />
     ),
     tabBarPosition: 'bottom',
     ........

    });

试试看。附上您的页脚标签，即<FooterTabs /> 而不是FooterTabs

【讨论】：

【解决方案2】：

经过反复试验，我的问题的解决方案是将页脚内容包装在 ScrollView 中，然后选项卡按预期显示，但我不确定为什么需要这样做。

我还实施了 Caleb 的建议（谢谢！），即使用 tabBarComponent: props => <FooterTabs{...props} /> 来传递我需要的道具，但这不是问题的原因。

【讨论】：

您好，感谢您的解决方案，但请您解释一下将页脚内容包装在 ScrollView 中的更多信息，您是如何做到的？我会感谢任何帮助。我陷入了同样的问题：S
@JustinLok 你能贴出整个 FooterTabs 代码吗？
@Rawan 你做到了吗？您可以发布您的 CustomTabBar 代码吗？