为什么我的 TabBar 无法正确呈现在 React Native Router Flux 的顶部位置？

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 显示您的图标，背景颜色将通过样式应用。请参阅此 link 以获取 tabBarPosition='Top' 选项卡栏位置设置为顶部时可以使用的道具 TabBar position=top props that can be used.

为什么我的 TabBar 无法正确呈现在 React Native Router Flux 的顶部位置？

Why is my TabBar not rendering correctly in top position in react native router flux?

javascript

react-native

react-native-router-flux