Question

我有应用设置的主导航。在这里，我初始化了可以包含抽屉，堆栈或标签堆栈的路由堆栈。

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

但是，如果我在 CollectorRoutes 的屏幕上的 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>
  );
};

有什么解决方法可以访问父级中的抽屉式切换器？还是可以以某种方式代替在父级中提供header选项，而可以在子级中对其进行配置？

父级React Navigation V5中子级的打开抽屉

0 个答案: