reactjs - 从父 React Navigation V5 打开子抽屉

Question

我有应用程序设置的主要导航。在这里，我初始化了可以有抽屉、堆栈或选项卡堆栈的路由堆栈。

导航.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>
  );
};

问题是当我尝试从其中一个堆栈更改标题时，我无法更改该堆栈的标题设置，例如：

收集器路由.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>
  );
};

但是，如果我在CollectorRoutes的 scree 上的navigation.js中提供标题选项，那么标题是自定义的。

但是又出现了一个问题，我无法从那里切换抽屉，因为父抽屉堆栈的导航堆栈无法访问。

navigation.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>
  );
};

是否有任何解决方案可以访问父级中的抽屉切换？或者我们可以以某种方式而不是在父级中提供标题选项，而是在子级中配置它？

标签： reactjsreact-nativereact-navigationreact-navigation-v5drawertoggle