Android 如何在ReactNative的功能组件中同时使用Header和BottomTabNavigator？

我想要有BottomTabNavigator和createStrackNavigator生成的默认标题

我的问题是，当我尝试使用这两个选项时，有一个被忽略了，导航文档都是基于类组件的，我无法解决这个问题

这是我的navigator.js文件

import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import RegisterLoginScreen from './views/RegisterLoginScreen/RegisterLoginScreen';
import ConfirmCodeScreen from './views/ConfirmCodeScreen/ConfrimCodeScreen';
import QRCodeScreen from './views/QRCodeBuy/QRCodeBuyScreen';
import ServicesScreen from './views/ServicesScreen/ServicesScreen';
import ProfileEditScreen from './views/ProfileEditScreen/ProfileEditScreen';
import TransactionScreen from './views/TransactionScreen/TransactionScreen';

const HeaderNavigator = createStackNavigator({
  RegisterLogin: RegisterLoginScreen,
  confirmCode: ConfirmCodeScreen,
  QRBuy: QRCodeScreen,

});
const BottomTabNavigator = createBottomTabNavigator({
  ProfileEdit: ProfileEditScreen,
  Services: ServicesScreen,
  Transactions:TransactionScreen,
  QRBuy: QRCodeScreen,
});
const AppSwitch = createSwitchNavigator({
  BottomTabNavigator: BottomTabNavigator,
  Header:HeaderNavigator

});

export default createAppContainer(AppSwitch);

QRScreen.js

import React from 'react';
import {View, Text} from 'react-native';

const QRCodeBuyScreen = () => {
  return (
    <View>
      <Text>This is qr screen</Text>
    </View>
  );
};
QRCodeBuyScreen.navigationOptions = () => ({
  title:'بارکد',
  headerStyle: {
    backgroundColor: '#CD0448',
  },
});
QRCodeBuyScreen.tabBarOptions = () => ({
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
});

export default QRCodeBuyScreen;

从“React”导入React；
从“react native”导入{View，Text}；
常量QRCodeBuyScreen=（）=>{
返回(
这是qr屏幕
);
};
QRCodeBuyScreen.navigationOptions=（）=>({
标题：“باکد”，
头型：{
背景颜色：“#CD0448”，
},
});
QRCodeBuyScreen.tabBarOptions=（）=>({
activeTintColor:“#e91e63”，
标签样式：{
尺寸：12，
},
风格：{
背景颜色：“蓝色”，
},
});
导出默认QRCodeBuyScreen；

---

有没有办法在屏幕上同时显示两者？或者有什么解决办法吗？

我把答案留在这里，我找到了自己。这里的关键是将导航相互嵌套，然后将其中一个作为高阶导航传递，另一个嵌套在高阶导航中

例如，如果你想要这样的东西

headerTab{
   login
   confirm otp => bottomTab{
    first{},
    second{},
    third{} // each can have their own stack of screens 
 }
}

您需要按如下方式配置导航器：

import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';

import LandingScreen from './views/SplashLandingScreen/SplashLanding';
import AboutScreen from './views/AboutScreen/AboutScreen';
import RegisterLoginScreen from './views/RegisterLoginScreen/RegisterLoginScreen';
import ConfirmCodeScreen from './views/ConfirmCodeScreen/ConfrimCodeScreen';
import userProfileScreen from './views/userProfileScreen/userProfileScreen';
import QRCodeScreen from './views/QRCodeBuy/QRCodeBuyScreen';
import ServicesScreen from './views/ServicesScreen/ServicesScreen';
import WalletScreen from './views/WalletScreen/Wallet';
import MyQRCodeScreen from './views/MyQRCode/MyQRCodeScreen';
import ProfileEditScreen from './views/ProfileEditScreen/ProfileEditScreen';
import TransactionScreen from './views/TransactionScreen/TransactionScreen';
import Msg from './views/Messages/Messegaes';

const StackNavigator = createStackNavigator({
  Landing: LandingScreen,
  RegisterLogin: RegisterLoginScreen,
  confirmCode: ConfirmCodeScreen,
});

const ProfileStack = createStackNavigator({
  Profile: userProfileScreen,
  ProfileEdit: ProfileEditScreen,
  MyQR: MyQRCodeScreen,
  Wallet: WalletScreen,
  About: AboutScreen,
  Msg: Msg,
},);
const BottomTabNavigator = createBottomTabNavigator(
  {
    userProfile: ProfileStack,
    Services: ServicesScreen,
    Transaction: TransactionScreen,
    QRBuy: QRCodeScreen,
  },
  {
    initialRouteName: 'QRBuy',
  },
);
const AppSwitchNavigator = createSwitchNavigator({
  StackNavigator: StackNavigator,
  BottomTabNavigator: BottomTabNavigator,
});
export default createAppContainer(AppSwitchNavigator);

---

我认为不可能将两个标题结合起来，试着修改一个标题，然后把你想要的标题放在我的答案前面，实际上我会发布它