React Navigation Bottom Tabs 在 React Native Web 中占据整个屏幕答案

【问题标题】：React Navigation Bottom Tabs occupying the whole screen in React Native WebReact Navigation Bottom Tabs 在 React Native Web 中占据整个屏幕
【发布时间】：2021-01-23 15:09:57
【问题描述】：

我正在尝试在 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;
`;

【问题讨论】：

标签： react-native react-navigation react-native-web bottomtabs

【解决方案1】：

我也遇到过同样的问题，解决方法是在你的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

【讨论】：