React Native组件在网页侧边显示的问题求助

我用Expo和React Navigation开发了基础的React Native页面导航组件，网页端运行时Home组件显示在页面侧边，修改组件样式后仍无法解决。

代码示例 #

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;

解决方案 #

问题出在App.js最外层的<View>没有设置样式，导致网页端布局无法占满整个视口。修改App.js，给外层View添加占满视口的样式即可：

修改后的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 style={styles.rootContainer}>
      <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>
  );
}

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1,
    width: '100%',
  },
});

export default App;

原因说明 #

在Expo Web环境下，React Native的<View>默认不会自动铺满浏览器窗口宽度。外层View缺少flex:1和width:100%样式时，内部的NavigationContainer会收缩到内容宽度，导致页面内容居侧。添加这两个样式后，外层View会占满整个视口的高度和宽度，内部组件就能正常居中显示。

内容的提问来源于stack exchange，提问作者dgnotset