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;

Historical.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;

非常基础的组件
这是我的问题：
Screenshot
出于某种原因，我的组件“主页”在此图像上显示在我的网页的一侧。这是一个CSS问题。
如果能帮上忙就太好了。
我试图改变我的组件的风格，但没有工作