javascript-如何为TabNavigator使用tabBarComponent？标签栏未显示

我正在尝试制作自己的自定义标签栏,看来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>
    )
  }
}

我想念什么？

解决方法:

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

    });

试试看封装您的FooterTab,即< FooterTabs />不是FooterTabs

标签：react-navigation,tabnavigator,react-native,javascript
来源： https://codeday.me/bug/20191025/1931840.html