web-dev-qa-db-ja.com

TabNavigatorの追加のパディング

TabNavigatorタブの高さとパディングのスタイルを設定するにはどうすればよいですか？私は次のことをしています：

import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
  TabItem1: {
      screen: MainScreen,
      navigationOptions: {
          tabBarLabel:"Home",
          tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={20} color={tintColor} />
      }
    },
    TabItem2: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Home",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={30} color={tintColor}  />
      }
    },
    TabItem3: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Browse",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} color={tintColor} />
      }
    }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        activeTintColor: '#222',
        activeBackgroundColor :'yellow',  //Doesn't work
        showIcon: true,
        tabStyle: {
            padding: 0, margin:0,   //Padding 0 here
        },
    iconStyle: {
        width: 30,
        height: 30,
        padding:0       //Padding 0 here
    },
    }
});

enter image description here

アイコンとラベルの間のパディングを取り除くにはどうすればよいですか？やった padding:0iconStyleとtabStyleにありますが、運がありません。 labelの下にもパディングは必要ありません。それ、どうやったら出来るの？ありがとう。

余分なパディングがViewによって引き起こされていることがわかりました： enter image description here

どうすればそれを取り除くことができますか？

react-nativereact-navigationtabnavigator
4
Somename

設定により解決：

tabBarOptions: {
  labelStyle: {
    margin: 0
  },
}
7
Denis

残念ながら、このライブラリには多くのレイアウト設定がハードコーディングされています（パディングのように：デフォルトで他の場所から提供されるタブの場合は12）。

唯一のオプションは、node_modules\react-navigation\lib\views\TabView \ファイルを調べて、必要に応じて要件に合わせて調整することです。

現在、私はこれらのソースをハッキングして、正方形（x = y、デフォルト）のタブアイコンだけでなく、長方形（x> y）を許可するための手っ取り早い方法を見つけています。

他のオプションは、メンテナが提案するようにカスタムtabBarコンポーネントを作成することです

2
Alex Green

styleの下のtabBarOptionsだけを試してください

  tabBarOptions: {
    style: {
      height: 45
    }
  }
1
Rami Enbashi

同様の問題があり、paddingTopだけでなく、必要な特定のパディングプロパティ（paddingLeftやpaddingなど）を上書きすることで解決しました。

0
gonzaloriestra

私はこのページを見てそれをしました https://reactnavigation.org/docs/en/material-top-tab-navigator.html

私のTabStackは次のようになります。

const tabBarOptions = {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    paddingTop: 50,
    backgroundColor: 'red',
  },
}

export const TabStack = createMaterialTopTabNavigator({
  History: History,
  Current: Current,
  Settings: Settings,
}, {
    tabBarOptions: tabBarOptions
});
0
Joey Gough