3

独自のカスタム タブ バーを作成しようとしていますが、独自のコンポーネントとして設定することで、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>
    )
  }
}

私は何が欠けていますか？

4

2 に答える 2

1

いくつかの試行錯誤の後、私の問題の解決策は、フッターのコンテンツを ScrollView でラップすることでした。その後、タブが期待どおりに表示されましたが、それが必要な理由はわかりません。

tabBarComponent: props => <FooterTabs{...props} />問題の原因ではありませんでしたが、必要な小道具を渡すために使用するという Caleb の提案 (ありがとう!) も実装しました。

于 2017-07-15T06:09:16.250 に答える