为什么我的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>

这就是它的外观以及我希望它如何表现，但很明显，导航条正下方的顶部标签栏。

标签栏位置顶部

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

我将顶部值设置为100仅用于演示目的。我会根据导航栏的高度使用动态值。

您可以看到标签没有显示，屏幕顶部和导航栏之间有一个边距，活动标签上有一个黄色的底部边框，而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显示您的图标和背景颜色将通过样式应用。有关标签栏位置设置为顶部时可以使用的tabBarPosition='Top'道具，请参阅此链接 TabBar position=top props that can be used.