2017-12-31 204 views
1

tabBarPositionがbottomに設定されている場合は、私のタブバーはうまく表示されますが、tabBarPositionをtopに設定すると正しく表示されません。反応したネイティブルータのフラックスで、TabBarが正しく表示されないのはなぜですか?

ここは私のコードです(これはダッシュボードのシーン用です)。

<Provider store={store}> 
    <Router> 
     <Scene key="root" hideNavBar={true}> 
     <Scene key="tabbar" tabs={true} tabBarStyle={{ backgroundColor: '#eee' }} showLabel={false}> 
      <Scene key="search" title="Search" icon={TabIcon} initial={true}> 
      <Scene key="searchHome" component={HomeScene} title="Search" initial={true}/> 
      <Scene key="searchResults" component={SearchResultsScene} title="Search Results" /> 
      </Scene> 
      <Scene key="dash" icon={TabIcon} title="Dashboad"> 
       <Scene key="dashTabs" tabs={true} tabBarPosition="bottom" tabBarStyle={{ backgroundColor: '#eee' }} showLabel={false} > 
       <Scene key="profile" component={ProfileScene} title="Profile" icon={TabIcon} initial={true}/> 
       <Scene key="messaging" component={MessagingScene} title="Messaging" icon={TabIcon}/> 
       <Scene key="settings" component={SettingsScene} title="Settings" icon={TabIcon}/> 
       </Scene> 
      </Scene> 
      <Scene key="auth" title="Login" icon={TabIcon}> 
      <Scene key="login" component={LoginScene} title="Login" /> 
      </Scene> 
     </Scene> 
     </Scene> 
    </Router> 
    </Provider> 

これはどのように見えるか、どのように動作させたいのですが、明らかにnavbarのすぐ下にあるトップタブバーを使用してください。

tabBarPosition="bottom"

タブバーの位置トップ

<Scene key="dashTabs" tabs={true} tabBarPosition="top" tabBarStyle={{ backgroundColor: '#eee', top: 100 }} showLabel={false} > 

enter image description here

私は、デモの目的のために100にトップ値を設定します。私はnavbarの高さに基づいて動的な値を使用します。

ラベルが表示されず、画面上部とナビゲーションバーの間に余白があり、アクティブなタブに黄色の下枠があり、TabIconコンポーネントがレンダリングされていないことがわかります。

これは、上部タブバーがAndroidのデフォルトであり、スタイリングが下部バーと異なるため(これはIosのデフォルトです)?

アイデア?

ありがとうございます!

"react": "16.0.0", 
"react-native": "0.51.0", 
"react-native-router-flux": "^4.0.0-beta.24", 
"react-redux": "^5.0.6", 
"react-router": "^4.2.0", 
"redux": "^3.7.2" 

答えて

1

あなたのアイコンと背景色がスタイルを介して適用されます表示するには、次のよう

<Scene key="dash" icon={TabIcon} title="Dashboad"> 
       <Scene key="dashTabs" tabs={true} tabBarPosition="bottom" tabBarStyle={{ backgroundColor: '#eee' }} showLabel={false} showIcon activeTintColor="purple" 
       inactiveTintColor="black" 
       labelStyle={{ flexWrap: 'nowrap' }} 
       indicatorStyle={{ backgroundColor: 'transparent' }} > 
       <Scene key="profile" component={ProfileScene} title="Profile" icon={TabIcon} initial={true}/> 
       <Scene key="messaging" component={MessagingScene} title="Messaging" icon={TabIcon}/> 
       <Scene key="settings" component={SettingsScene} title="Settings" icon={TabIcon}/> 
       </Scene> 
      </Scene> 

使用showIconで使用この。 「透明」:私はshowIconプロップを含めてindicatorStyle = {{backgroundColorのとき、私は戻って私のタブのスタイルを取得することができた TabBar position=top props that can be used.

+0

をトップに、タブバーの位置セットの場合にも使用することができるtabBarPosition='Top'小道具のために、このリンクを参照してください。 }}黄色の下のボーダーを取り除きました。しかしtabBarはまだnavBarの上にあります。トップ値をnavbarの高さに設定すると、タブバーはナビゲーションバーの下になりますが、ナビゲーションバーの上にはタブバーの高さに等しいパディングがあります。 OPの第2のイメージのように。助けてくれてありがとう! – user3891559

関連する問題