0

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

在此处输入图像描述

我正在使用基于本机的 Header 来实现这一点。在应用程序的根目录下，我有一个标签导航，每个标签都有自己的抽屉式导航。像下面 在此处输入图像描述

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

 <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;

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

 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"

任何帮助将不胜感激。

4

1 回答 1

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

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

<CustomHeader title="this is title" subtitle="this is subtitle"/>
于 2019-10-31T05:44:38.663 回答