reactjs - 应用栏和状态栏之间的空间太大

问题描述

我正在制作一个应用程序，我想在其中使用反应导航。出于某种原因，每当我在反应导航中使用抽屉时，状态栏和抽屉应用程序栏之间都会有很大的空间。

这是我的代码 -

import { StatusBar } from "expo-status-bar";
import * as React from "react";
import { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import Constants from "expo-constants";
import Header from "../Header";
import { Flexbox } from "../Layout";
import Card from "../Card";
import { marginAboveCard } from "../../constants/constants";
import Row from "../Row";
import { convertToIndianNumberingFormat } from "../../utils/utils";

const HomeScreen = ({ navigation }) => {
    const [cardsData, setCardsData] = useState({
        confirmed: 0,
        active: 0,
        recovered: 0,
        deceased: 0,
        tests: 0,
        critical: 0,
    });
    const [lastUpdated, setLastUpdated] = useState("");

    useEffect(() => {
        const getData = async () => {
            const cardsDataResponse = await fetch(
                "https://disease.sh/v3/covid-19/all"
            );
            const cardsDataFetched = await cardsDataResponse.json();

            setCardsData({
                confirmed: convertToIndianNumberingFormat(
                    cardsDataFetched.cases
                ),
                active: convertToIndianNumberingFormat(cardsDataFetched.active),
                recovered: convertToIndianNumberingFormat(
                    cardsDataFetched.recovered
                ),
                deceased: convertToIndianNumberingFormat(
                    cardsDataFetched.deaths
                ),
                tests: convertToIndianNumberingFormat(cardsDataFetched.tests),
                critical: convertToIndianNumberingFormat(
                    cardsDataFetched.critical
                ),
            });

            const time = new Date(cardsDataFetched.updated);
            const lastupdated = time.toLocaleTimeString();
            setLastUpdated(`Last updated at ${lastupdated}`);
        };

        getData();
    }, []);

    return (
        <ScrollView style={styles.main}>
            <View style={{ marginTop: Constants.statusBarHeight }}>
                <StatusBar style="auto" />
                <Header text="COVID-19" />

                <Text style={styles.lastUpdatedText}>{lastUpdated}</Text>

                <View style={{ marginTop: marginAboveCard }}>
                    <Flexbox style={{ marginTop: 15 }}>
                        <Card
                            background="red"
                            title="Confirmed"
                            number={cardsData.confirmed}
                        />
                        <Card
                            background="#3877F0"
                            title="Active"
                            number={cardsData.active}
                        />
                    </Flexbox>

                    <Flexbox style={{ marginTop: marginAboveCard }}>
                        <Card
                            background="#47CC3C"
                            title="Recovered"
                            number={cardsData.recovered}
                        />
                        <Card
                            background="#868686"
                            title="Deceased"
                            number={cardsData.deceased}
                        />
                    </Flexbox>

                    <Flexbox style={{ marginTop: marginAboveCard }}>
                        <Card
                            background="#E85FEB"
                            title="Tests"
                            number={cardsData.tests}
                        />
                        <Card
                            background="#5BF8B6"
                            title="Critical"
                            number={cardsData.critical}
                        />
                    </Flexbox>
                </View>

                <View style={{ marginTop: 30 }}>
                    <Header text="TABLE STATISTICS" />
                </View>
            </View>
        </ScrollView>
    );
};

export default HomeScreen;

const styles = StyleSheet.create({
    main: {
        flex: 1,
        backgroundColor: "#000232",
    },
    lastUpdatedText: {
        color: "white",
        textAlign: "center",
        marginTop: 12,
        fontSize: 15,
    },
});

我的 app.jsx -

import * as React from "react";
import HomeScreen from "./components/screens/HomeScreen";
import VaccineScreen from "./components/screens/VaccineScreen";

import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";

const Drawer = createDrawerNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={HomeScreen} />
                <Drawer.Screen name="Vaccine" component={VaccineScreen} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

如果您正确查看主屏幕的代码，您会看到一个status style设置为自动的组件。即使删除它，空间仍然存在。控制台中没有任何错误。当我使用反应导航抽屉时，这个错误开始出现。有没有办法可以删除空间？

标签： reactjsreact-nativereact-native-androidreact-native-navigation

reactjs - 应用栏和状态栏之间的空间太大

问题描述

解决方案

推荐阅读