使用底部导航栏时，屏幕在浏览器中不可见，但在手机上不可见？

Question

我正在用react native编写一个应用程序，今天我用react导航实现了底部导航栏。 react导航材料底部栏在此项目中使用。一切都可以在移动设备上正常运行（使用expo客户端进行测试），但是在浏览器中，屏幕不仅显示在底部导航栏上？

这是我的App.js代码：

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

function Profile() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Profile!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Card"
      shifting={true}
      activeColor={colours.bg}
      labelStyle={{ fontSize: 12 }}
    >
      <Tab.Screen
        name="Card"
        component={Feed}
        options={{
          tabBarLabel: "Card",
          tabBarColor: "tomato",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="History"
        component={Profile}
        activeColor
        options={{
          tabBarLabel: "History",
          tabBarColor: "green",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  const toggleOpen = () => {};
  return (
    <NavigationContainer>
      <MyTabs />
      <View style={styles.btnCircle}>
        <View style={[styles.button, styles.actionBtn]}>
          <TouchableOpacity onPress={() => toggleOpen()}>
            <Image
              style={{ width: 60, height: 60 }}
              resizeMode="contain"
              source={require("./assets/plusIcon.png")}
            />
          </TouchableOpacity>
        </View>
      </View>
    </NavigationContainer>
  );
}

´´´

Is there a known issue or did I code something wrong ?