Question

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

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

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

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

我们将不胜感激任何帮助。

Answer 1

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

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

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

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

1 个答案: