How to use tabBarComponent for TabNavigator? Tab bar not showing

问题

I'm trying to make my own custom tab bar and it seems tabBarComponent is the way to do it by setting as my own component. With the below code my tab bar does not show up.

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

In FooterTabs.js:

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

What am I missing?

回答1:

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

    });

Try that. enclose your FooterTabs i.e <FooterTabs /> not FooterTabs

回答2:

After some trial and error, the solution to my issue was to wrap my footer content in a ScrollView, then the tabs showed up as expected, though I am not sure why that is required.

I also implemented Caleb's suggestion (thanks!) of using tabBarComponent: props => <FooterTabs{...props} /> in order to pass the props which I need though was not the cause of the issue.

来源：https://stackoverflow.com/questions/45099753/how-to-use-tabbarcomponent-for-tabnavigator-tab-bar-not-showing

标签

javascript

react-native

react-navigation

tabnavigator