Открыть ящик ребенка от родителя React Navigation V5 - PullRequest
Новая
       70

Открыть ящик ребенка от родителя React Navigation V5

0 голосов
/ 29 марта 2020

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

навигация. js 

const Stack = createStackNavigator();

const AppNavigation = () => {
  return (
    <NavigationContainer style={{backgroundColor: 'red'}}>
      <Stack.Navigator headerMode="screen">
        <Stack.Screen
          options={{headerShown: false}}
          name="Auth"
          component={AuthRoutes}
        />
        <Stack.Screen
          name="collector"
          component={CollectorRoutes}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Проблема в том, что я пытаюсь изменить заголовок из одного из стеков, я не могу изменить настройки заголовка этого стека, как:

collector.routing. js

const Drawer = createDrawerNavigator();

const CollectorRoutes = () => {
  return (
    <Drawer.Navigator options ={ // options here also have no effect}>
      <Drawer.Screen
        options={({navigation}) => ({ // this has no effect
          headerTitle: props => (
            <View>
              <Text>HEDAER</Text>
            </View>
          ),
          headerLeft: props => (
            <Button
              block
              style={{backgroundColor: themeStyle.textColor}}
              onPress={() => navigation.toggleDrawer()}>
              <Text>Login</Text>
            </Button>
          ),
        })}
        name="list"
        component={Collector}
      />
    </Drawer.Navigator>
  );
};

Однако если я задаю параметры заголовка в навигации. js на экране на CollectorRoutes , тогда заголовки настраиваются.

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

навигация. js -> с включенным заголовком для DrawerStack (CollectorRoutes) 

const Stack = createStackNavigator();

const AppNavigation = () => {
  return (
    <NavigationContainer style={{backgroundColor: 'red'}}>
      <Stack.Navigator headerMode="screen">
        <Stack.Screen
          options={{headerShown: false}}
          name="Auth"
          component={AuthRoutes}
        />
        <Stack.Screen
          options={({navigation}) => ({ // this setting gives me header in drawer stack 
            headerTitle: props => (
              <View>
                <Text>HEDAER</Text>
              </View>
            ),
            headerLeft: props => (
              <Button
                block
                style={{backgroundColor: themeStyle.textColor}}

                onPress={() => navigation.toggleDrawer()}> // but here I cannot access drawer toggle 
                <Text>Login</Text>
              </Button>
            ),
          })}
          name="collector"
          component={CollectorRoutes}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Есть ли какое-либо решение для доступа к переключателю ящика в родительском элементе? Или мы можем как-то вместо указания опции заголовка в parent мы можем настроить ее в child?

...