отреагировать на проблему с собственным бесполезным разрывом (областью) с помощью flex

Question

Я новичок в React Native с expo, поэтому все еще борюсь с гибкостью, хотя и читаю много документов. Как прикрепленное изображение, на изображении есть промежуток, область красного прямоугольника между стилем header и router в компоненте Home. Я пытался удалить эту область, но пока не знаю. Не могли бы вы дать мне совет?

Компонент: Главная

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, Dimensions } from 'react-native';
import LocationBar from "./locationBar";
import { Router, Scene } from 'react-native-router-flux';
import Item from "../Item/item";
import Main from "./main";

export default function Home() {

    return (
        <>
            <View style={styles.header}>
                <LocationBar />
            </View>
            <Router style={styles.router}>
                <Scene key="root">
                    <Scene key="main" component={Main} initial={true} />
                    <Scene key="item" component={Item} />
                </Scene>
            </Router>
        </>
    );
}

const width_proportion = '100%';
const height_proportion = '15%';

const styles = StyleSheet.create({
    header: {
        flex:0.15,
        backgroundColor: 'yellow',
        width: width_proportion,
    },
    router: {
        flex: 1,
        backgroundColor: 'blue',
        width: width_proportion,
        justifyContent: 'center',
        alignItems: 'center'
    },

});

Компонент: Элемент

import * as React from 'react';
import { View, StyleSheet, Dimensions, Text, Button, FlatList, } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
    <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

const SecondRoute = () => (
    <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

const initialLayout = { width: Dimensions.get('window').width };

export default function Item({ menu, itemId }) {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'first', title: 'First' },
        { key: 'second', title: 'Second' },
    ]);

    const renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
    });

    return (
        <>
            <TabView
                navigationState={{ index, routes }}
                renderScene={renderScene}
                onIndexChange={setIndex}
                initialLayout={initialLayout}
            >
    );
}

const styles = StyleSheet.create({
    scene: {
        flex: 1,
    },
});

Компонент: Местоположение

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import * as Location from "expo-location";

export default function LocationBar() {
    const [lat, setLat] = useState();
    const [lon, setLon] = useState();

    useEffect(() => {
      ...
    });


    return (<View style={styles.container}>
        <MaterialIcons name="location-on" size={30} />
        <Text>
            ({lat}-{lon})
        </Text>
    </View>);
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        marginTop: 10
    },

});

Answer 1

Я получил ответ от этого поста ! hideNavBar={true} является ключом, чтобы скрыть эту область