реагировать на собственное название доступа к текущему экрану во вложенной панели навигации - PullRequest
Новая
       34

реагировать на собственное название доступа к текущему экрану во вложенной панели навигации

0 голосов
/ 31 октября 2019

У меня есть собственное приложение реагирования, использующее реагирующую навигацию, где я хочу, чтобы мой заголовок выглядел так с заголовком и подзаголовком.

enter image description here

IЯ использую заголовок родной базы для достижения этой цели. В корне приложения у меня есть навигация по вкладкам, и каждая вкладка имеет собственную навигацию по ящикам. Как показано ниже enter image description here

Для всех вкладок есть отдельный компонент заголовка, внутри которого заголовок i жестко закодирован. Подзаголовок должен быть заголовком текущего активного экрана, аналогичного 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"

Любая помощь будет высоко оценена.

1 Ответ

0 голосов
/ 31 октября 2019 
  const MyScreen1Stack = createStackNavigator(
{
   Screen1: {
      screen: Screen1,
      navigationOptions: ({ navigation }) => ({
      header:<CustomHeader navigation={navigation}/>
      });
   }
});

Использование собственного заголовка таким образом и передача реквизитов навигации в заголовок, чтобы вы могли получить доступ к навигации в настраиваемом заголовке, а также передавать заголовок и субтитры в качестве реквизитов. 

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