React 本机组件显示在我的网页一侧

Question

App.js：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

// Importing React Navigation
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// Importing Screens
import Home from './screens/Home';
import Historical from './screens/Historical';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <View>
      <NavigationContainer>
        <Stack.Navigator initialRouteName='Home'>
          <Stack.Screen
            name='Home'
            component={Home}
            options={{ title: 'RoomMapping' }}  
          />
          <Stack.Screen
            name='Historical'
            component={Historical}
            options={{ title: 'Historique de scan' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
      <StatusBar style="auto" />
    </View>
  );
}

export default App;

**我的两个组件：**

Home.js

import * as React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native'

function Home({ navigation}) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Aller à l'historique des scans"
        onPress={() => navigation.navigate('Historical')}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container : {
    flex : 1,
    alignItems : 'center',
    justifyContent : 'center',
  }
});

export default Home;

历史.js

import * as React from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';

function Historical() {
  return (
    <View style={styles.container}>
      <Text>Historical</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container : {
    flex : 1,
    alignItems : 'center',
    justifyContent : 'center',
  }
});

export default Historical;

非常基础的组件

这是我的问题：

由于某种原因，此图像上的我的组件“主页”显示在我的网页一侧。 肯定是 CSS 问题。

如果您能提供一些帮助，我们将不胜感激。

我尝试更改组件的样式，但没有任何效果

Answer 1

使用

flex: 1

作为父视图来覆盖可用空间。

<View style={{flex: 1}}>
  <NavigationContainer>
...
  </NavigationContainer>
  <StatusBar style="auto"/>
</View>