反応したネイティブルータのフラックスで、TabBarが正しく表示されないのはなぜですか？

Question

tabBarPositionがbottomに設定されている場合は、私のタブバーはうまく表示されますが、tabBarPositionをtopに設定すると正しく表示されません。

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

<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のすぐ下にあるトップタブバーを使用してください。

タブバーの位置トップ

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

私は、デモの目的のために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" 

Answer 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.