React 导航底部选项卡不适用于 React Native for Web

Question

我正在使用 react-native-web 和 @react-navigation/bottom-tabs 构建一个网络应用。

但屏幕内容不会出现在网络上，它只显示标签栏。它在 iOS 和 Android 上运行良好。

代码如下：

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import {Text, View} from 'react-native';

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the home screen</Text>
    </View>
  );
};

const RootView = () => {
  const Tab = createBottomTabNavigator();
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default React.memo(RootView);

依赖：

"dependencies": {
    "@react-native-community/async-storage": "^1.12.1",
    "@react-navigation/bottom-tabs": "^5.11.2",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "@reduxjs/toolkit": "^1.5.0",
    "axios": "^0.21.1",
    "class-transformer": "^0.3.1",
    "react": "16.13.1",
    "react-dom": "^17.0.1",
    "react-native": "0.63.3",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-native-web": "^0.14.10",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-observable": "^1.2.0",
    "redux-persist": "^6.0.0",
    "rxjs": "^6.6.3",
    "styled-components": "^5.2.1"
  },

Web 和 iOS 上的结果：