React 导航抽屉：永久抽屉在 Web 浏览器中调整大小时变为空白

Question

我创建了一个使用 Expo 和 React 导航的 react-native 应用程序。对于菜单，我使用的是反应式导航抽屉。

如 documentation 中的建议，我想在大屏幕上永久显示抽屉，在小屏幕上可绘制。

初始行为是正确的，但当我使用 Web 应用程序调整屏幕大小时，从大到小再回到大，我确实看到了一个问题。 drawerType 得到更新，但面板是空白的。当我点击header中的切换按钮时，它有时会出现。

如何使抽屉在屏幕尺寸变大后始终可见？

简约代码示例：

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useWindowDimensions } from 'react-native';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  const dimensions = useWindowDimensions();
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerType: dimensions.width >= 768 ? 'permanent' : 'front',
        drawerStyle: {
          backgroundColor: '#c6cbef',
          width: 240,
        },
      }}
    >
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.1.8",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-web": "^0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Answer 1

我原以为我使用代码的方式会出现问题，但它似乎是 React Navigation 中的错误。

我现在使用permanent/back而不是permanent/front，问题不会出现。现在作为解决方法已经足够好了。替代方案是回退到版本 6.1.4。

     <Drawer.Navigator
          screenOptions={{
            drawerType: dimensions.width >= 768 ? 'permanent' : 'back',
            drawerStyle: {
              backgroundColor: '#c6cbef',
              width: 240,
            },
          }}
        >

查看 React Navigation 的问题跟踪器了解最新状态： https://github.com/react-navigation/react-navigation/issues/10044

React 导航抽屉：永久抽屉在 Web 浏览器中调整大小时变为空白

React navigation drawer: permanent drawer turns blank on resize in webbrowser

react-native

react-native-web

react-navigation-drawer