React Navigation底部选项卡占据了React Native Web的整个屏幕

问题描述

我试图在React-Native-Web中使用React-Navigation底部选项卡，结果是设备中预期的结果：

result in device

但是在网络上它是这样的：

result in the browser

如果我查看页面，则可以在其中找到main的元素。

这是代码：

src / App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';

import {StatusBar} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import Main from './pages/Main/index';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <>
      <StatusBar
        backgroundColor="transparent"
        translucent
        barStyle="light-content"
      />
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Main" component={Main} />
        </Tab.Navigator>
      </NavigationContainer>
    </>
  );
};

export default App;

src / pages / Main / index.js

import React,{useState,useEffect} from 'react';
import {View,Dimensions} from 'react-native';

// import api from '../../services/api';

import Company from '../../components/Company';

import {Container,Title,List} from './styles';

export default function Main() {
  //...
  return (
    <View
      style={{
        display: 'flex',flexDirection: 'column',height: Dimensions.get('window').height,justifyContent: 'center',}}>
      <Container>
        <Title>Empresas CadasTradas</Title>
        <List
          keyboardShoulPersistTaps="handled"
          data={companies}
          keyExtractor={(item) => String(item.id)}
          renderItem={({item}) => <Company data={item} />}
        />
      </Container>
    </View>
  );
}

src / pages / Main / styles.js

import styled from 'styled-components/native';

export const Container = styled.View`
  background-color: #7159c1;
  padding-top: 30px;
  flex: 1;
`;

export const Title = styled.Text`
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  padding: 0 20px;
  margin-bottom: 10px;
`;

export const List = styled.FlatList.attrs({
  contentContainerStyle: {paddingHorizontal: 10},showsverticalScrollIndicator: false,})`
  margin-top: 20px;
`;

解决方法

我也遇到了同样的问题，解决办法是在你的src某处添加index.css，加载到你的index.js或者index.web.js中，然后把这个：

html,body {
  height: 100%;
}
/* These styles disable body scrolling if you are using <ScrollView> */
body {
  overflow: hidden;
}
/* These styles make the root element full-height */
#root {
  display: flex;
  height: 100%;
}

在以下讨论中找到了解决方案： https://github.com/react-navigation/react-navigation/issues/9187