最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to use tabBarComponent for TabNavigator? Tab bar not showing - Stack Overflow

programmeradmin2浏览0评论

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 ponent. 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?

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 ponent. 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?

Share Improve this question edited Mar 28, 2019 at 11:47 David Schumann 14.8k13 gold badges83 silver badges105 bronze badges asked Jul 14, 2017 at 9:44 Justin LokJustin Lok 1,2703 gold badges18 silver badges35 bronze badges 0
Add a ment  | 

2 Answers 2

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

    });

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

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.

发布评论

评论列表(0)

  1. 暂无评论