React Native Router Flux：如何在React导航通量的Tabbar上方显示自定义NavBar

问题描述

我无法在线找到解决方案，真的希望有人可以帮助我。我希望能够在React-Native-Router-Flux的tab栏上方显示一个导航栏。结果应如下所示：

---

图A： 使用以下代码，我可以实现我想要的，但是有很多错误：

显示的错误：

• 异常：未定义的不是对象
• 警告：您只应在应用中显式呈现一个导航器

Router.js：

import React from 'react';
import {
  Router,Scene,Stack,Tabs,} from 'react-native-router-flux';

import {
  Dashboard,} from 'screens';

const AppRouter = props => {
  return (
    <Router>
      <Stack key='root' hideNavBar>
        <Scene key='dashboard' component={ Dashboard } initial />
      </Stack>
    </Router>
  );
};

export default AppRouter;

Dashboard.js：

import React from 'react';
import { Container } from 'components';
import { Router,Actions } from 'react-native-router-flux';

import Styles from './style';
import {
  Chart,Analysis,} from 'screens';

const Dashboard = props => {
  return (
    <Container nopaddingTop nopaddingHorizontal header={ {
        leftButton  : 'chevron-back-outline',middleText  : 'Michael',rightButton : 'share-outline',onPressLeft : Actions.pop } }
      >
      <Router>
        <Tabs
          key='Tabbar'
          // tabBarComponent={ TabMenu }
          tabBarPosition='top'
          tabBarStyle={ { backgroundColor: 'white' } }
          labelStyle={ { color: 'black',textTransform: 'capitalize' } }
          indicatorStyle={ { backgroundColor: 'black',height: 4 } }
        >
          <Scene key='Chart' component={ Chart } hideNavBar title='Chart' initial/>
          <Scene key='Analysis' component={ Analysis } hideNavBar title='Analysis'/>
        </Tabs>
      </Router>
    </Container>
  );
};

export default Dashboard;

容器组件只是将我的自定义导航栏放在适当的位置，并将内容包装在 SafeAreaView

中

---

图B： 更正代码以避免错误后，我对代码进行了如下更改：

Router.js：

import React from 'react';
import {
  Router,} from 'react-native-router-flux';

import {
  Chart,} from 'screens';

const AppRouter = props => {
  return (
    <Router>
      <Stack key='root' hideNavBar>
        <Scene tabs key='tabbar'
          tabBarPosition='top'
          tabBarStyle={ { backgroundColor: 'white' } }
          labelStyle={ { color: 'black',height: 4 } }
        >
          <Scene key='Chart' component={ Chart }  title='Chart' />
          <Scene key='Analysis' component={ Analysis }  title='Analysis' />
        </Scene>
      </Stack>
    </Router>
  );
};

export default AppRouter;

现在的问题是：

1. 导航栏位于状态栏的后面
2. 导航栏和标签栏之间有很大的空白
3. 导航栏不是自定义导航栏

完成这项工作的正确方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）