在嵌套抽屉导航中反应当前屏幕的本机访问标题

Question

我有一个使用 react-navigation 的 React 本机应用程序，我希望我的 header 看起来像这样，带有标题和副标题。

我正在使用 native-base Header 来实现这一点。在应用程序的根目录下，我有一个选项卡导航，每个选项卡都有自己的抽屉式导航。像下面一样

对于所有选项卡，都有单独的 Header 组件，我在其中硬编码了标题。子标题应该是当前活动屏幕的标题，类似于导航选项中配置的 drawerLabel 或 title。但是我无法在我的 header 组件中访问相同的内容。我什至将 navigation 作为道具传递给 header 但它包含选项卡作为活动路线，而不是抽屉的 initialRoute 作为活动路线。这就是我使用 header 组件

的方式

 <MyHeader navigation={navigation} subTitle={''} openDrawer={this.openDrawer}></MyHeader >

下面是我的抽屉配置

const DrawerConfig = {
   Screen1: {
      screen: Screen1,
      path: 'screen1',
      navigationOptions: ({ navigation }) => ({
         title: `Screen 1`,
         drawerLabel: 'Screen 1',
      }),
   }, Screen2: {
      screen: Screen2,
      path: 'screen2',
      navigationOptions: ({ navigation }) => ({
         title: `Screen 2`,
         drawerLabel: 'Screen 2'
      }),
   }
}
const DrawerNavigator = createDrawerNavigator(DrawerConfig, {
   initialRouteName: 'Screen1',
   contentComponent: CustomDrawerComponent,
});
const MyDrawerNavigator = createAppContainer(DrawerNavigator);
export default MyDrawerNavigator;

我有事件尝试为每个屏幕创建堆栈并使用默认 header 但我无法通过传入文档说应该工作的自定义 header 组件来自定义它.

 const MyScreen1Stack = createStackNavigator(
    {
       Screen1: {
          screen: Screen1,
       }
    },
    {
       navigationOptions: ({ navigation }) => ({
          initialRouteName: 'Screen1',
          title: 'Screen 1',
          drawerLabel: 'Screen 1',
          header: ()=> <MyHeader />,
          heaMode: 'screen'
       }),
    },
 );

以下是我的依赖项

"native-base": "^2.13.8",
"react": "16.8.1",
"react-native": "0.61.2",
"react-native-gesture-handler": "~1.3.0",
"react-native-modal": "^11.4.0",
"react-native-reanimated": "~1.2.0",
"react-native-screens": "1.0.0-alpha.23",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.1",
"react-navigation-stack": "^1.10.2",
"react-navigation-tabs": "^2.5.6"

非常感谢任何帮助。

Answer 1

  const MyScreen1Stack = createStackNavigator(
{
   Screen1: {
      screen: Screen1,
      navigationOptions: ({ navigation }) => ({
      header:<CustomHeader navigation={navigation}/>
      });
   }
});

以这种方式使用自定义 header 并将导航道具传递给 header 这样您就可以在自定义 header 中访问导航并且您也可以将标题和副标题作为道具传递。

<CustomHeader title="this is title" subtitle="this is subtitle"/>

在嵌套抽屉导航中反应当前屏幕的本机访问标题

react native access title of the current screen in nested drawer navigation

react-native

react-native-android

react-native-ios

react-navigation

react-navigation-drawer