android - 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>       

  );
};

对我来说，堆栈和抽屉屏幕的组合。提前致谢。

标签： androidreact-nativereact-navigationreact-navigation-stackreact-navigation-drawer

我认为问题不在于 Stack Navigator 或 Screen 组件。

如果您使用最新的 v5 版本之后的 @react-navigation/drawer（我的是 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>
  );

您还可以离开滚动视图并像这样创建自定义用户界面：


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>
    );

android - React 本机导航抽屉没有覆盖我的应用程序中的标题

问题描述

解决方案

推荐阅读