在我的应用程序中，React原生导航抽屉没有覆盖头部。

Question

我是一个新的react native开发，但我对react导航抽屉有一些要求。我想在屏幕顶部显示导航抽屉，但它在下面的工具栏显示。这是一个堆栈和抽屉屏幕的组合。以下是我在App.js中的代码

function App() {
  SplashScreen.hide()
  return (
    <NavigationContainer>
      {/* headerMode='float' */}
      <Stack.Navigator initialRouteName='Login' >
        <Stack.Screen name="Login" component={LoginScreen}
          options={{ headerShown: false }} />
        {/* <Stack.Screen name="Home" component={HomeScreen} /> */}
        <Stack.Screen name="DrawerScreens" component={DrawerScreens} 
          options={({ navigation, route }) => ({
            title: "Home",
            headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'},
            headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
          })} />

        <Stack.Screen name="Dashboard" component={Dashboard} 
            options={({ route }) => ({headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'}})} />
</Stack.Navigator>
</NavigationContainer>

DrawerScreens函数如下。

function DrawerScreens({ route, navigation }) {
  // console.log("param:"+route.params.token)
  return (
    //drawerContent={props=>CustomDrawerContent(props)}
    // <SafeAreaProvider>

    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="float" >
    {/* <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}> */}
      {/* options={{ drawerLabel: 'Updates' }} */}

      <Drawer.Screen name="LandingScreen" component={LandingScreen}
        initialParams={{ token: route.params.token }}/>
  );
}

CustomDrawer函数包含动态的菜单项列表，NestedMenuView负责处理。

function CustomDrawerContent(props) {
  return (
 <SafeAreaView style={{flex: 1}} forceInset={{ top: "always" }}>

      <NestedMenuView navObj={props.navigation} />

      </SafeAreaView>       

  );
};

对于我来说，堆栈和抽屉屏幕的组合.先谢谢你。

Answer 1

我不认为问题出在堆栈导航器或屏幕组件上。

如果你使用最新的，在v5发布后的@react-navigationdrawer版本(我的是5.6.3)，推荐的方法是在创建自定义抽屉时使用内置的包装器。

const Drawer = createDrawerNavigator();

const Menu = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Help" onPress={() => {}} />
    </DrawerContentScrollView>
  );
};

export default function MyDrawer() {
  return (
    <Drawer.Navigator
      initialRouteName="Tabs"
      drawerContent={(props) => <Menu {...props} />}
      edgeWidth={100}
      drawerContentOptions={{
        activeTintColor: Colors.accentColor,
        labelStyle: {
          fontFamily: 'open-sans',
        },
      }}
    >
      <Drawer.Screen...
    </Drawer.Navigator>
  );

你也可以离开滚动视图，创建自定义的ui，就像这样。

const contentOptions = {
    activeBackgroundColor: '#dbdbdb',
    activeLabelStyle: {
        fontSize: 16,
        color: 'black',
        fontFamily: 'roboto'
    },
    labelStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: intenseGrey,
        fontFamily: 'roboto'
    }
};

    return (
        <View
            style={{
                display: 'flex',
                flexDirection: 'column',
                flexGrow: 1
            }}
        >
            <SafeAreaView style={{ flex: 1, paddingBottom: 0 }}>
                <View style={{
                    backgroundColor: '#dbdbdb',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    flexGrow: 1}}
                 >
                    <View>
                        <DrawerItemList {...props} {...contentOptions} />
                    </View>
                </View>
            </SafeAreaView>
        </View>
    );

Answer 2

我认为Drawer没有被覆盖的原因是你把Drawer导航放在了Stack导航里面。

你的

Stack
   Drawer

要解决这个问题，你必须重新调整顺序。

Drawer
    Stack

例如（或者你可以从我这里的小吃看到。https:/snack.expo.io@gie3dd25aca。)

const HomeStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} options={({navigation}) => ({
      title: "Home",
      headerLeft: () => (
          <Ionicons
            name={'md-menu'}
            size={24}
            style={{ marginLeft: 10 }}
            onPress={() =>
              navigation.dispatch(DrawerActions.toggleDrawer())
            }
          />
        ),
    })} />
  </Stack.Navigator>
);

const Home = () => {
  return (
  <View>
    <Text>This is Home</Text>
  </View>
)}

export default () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="HomeStack">
        <Drawer.Screen name="HomeStack" component={HomeStack} />
        <Drawer.Screen name="HomeNoStack" component={Home} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Answer 3

创建了以下堆栈，并从Drawer Screens中调用这些堆栈。

const LandingStack = ({ route, navigation }) => (
  <Stack.Navigator>
    <Stack.Screen name="LandingScreen" component={LandingScreen} options={({navigation}) => ({
      headerTitle: 'Home',
      headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
      headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
    })} />
  </Stack.Navigator>
);

const TicketingStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="TicketingDashboard" component={TicketingDashboard} options={({route, navigation}) => ({
      headerTitle: route.params.type,
      headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
      headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
    })} />
  </Stack.Navigator>
);


function DrawerScreens({ route, navigation }) {
  // console.log("param:"+route.params.token)
  return (
    //drawerContent={props=>CustomDrawerContent(props)}
    <SafeAreaProvider>

    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="screen">


      {/* options={{ drawerLabel: 'Updates' }} */}

      {/* <Stack.Screen name="DrawerScreens" component={DrawerScreens}
          options={({ navigation, route }) => ({
            title: "Home",
            headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
            headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
          })} /> */}

      <Drawer.Screen name="LandingStack" component={LandingStack}

        initialParams={{ token: route.params.token }}/>

      <Drawer.Screen name="HomeStack" component={HomeStack}
        initialParams={{ token: route.params.token }} />
    </Drawer.Navigator>

    </SafeAreaProvider>
  );
}

我从函数App中删除了头的部分，最后在App.js中是这样的。

 <Stack.Screen name="DrawerScreens" component={DrawerScreens}
          options={{ headerShown: false }} />