☰

react-native react-navigationタブバーを透明にするにはどうすればいいですか？質問する

tag-icon • tag-icon react-native react-navigation
react-native react-navigationタブバーを透明にするにはどうすればいいですか？質問する

タブ バーを透明にする方法はありますか? 次のことを試しましたが、白い背景が表示されるだけです。独自の tabBarComponent を実装する必要がありますか? もしそうなら、そのクラスに関するドキュメントはありますか? また、どのインターフェイスを実装する必要がありますか?

const MainTabNavigator = TabNavigator(
  {
    MessageCenter: { screen: MessageCenterStack },
    Camera: { screen: CameraStack },
  },
  {
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      style: {
        backgroundColor:  'transparent',
      },
    }
  }
);

ベストアンサー1

absolute背景色を透明にするには、位置を設定し、左、右、下を指定する必要があります。

tabBarOptions: {
  showIcon: true,
  showLabel: false,
  lazyLoad: true,
  style: {
    backgroundColor: 'transparent',
    borderTopWidth: 0,
    position: 'absolute',
    left: 50,
    right: 50,
    bottom: 20,
    height: 100
  }
}

おすすめ記事