如何解决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;
现在的问题是:
- 导航栏位于状态栏的后面
- 导航栏和标签栏之间有很大的空白
- 导航栏不是自定义导航栏
完成这项工作的正确方法是什么?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。