反应导航内容尺寸太窄

Question

您好，我正在 React Native 应用程序中实现 React 导航，并且我正在关注 React 导航的文档。当我运行代码时，这就是结果：

我的问题是如何使中心内容的宽度与屏幕相同。 另外，这是我从reactJS切换后第一次使用react native expo

代码： 导航代码：

import Login from "./Login";
import Signup from "./Signup";
import {
  createAppContainer,
  NavigationContainer,
  NavigationNavigator,
} from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Chat from "./Chat";
import Error from "./Error";

/**
 * This is the screen stack of the navigation stack.
 */

const screens: any = {
  default: { screen: Login },
  signup: { screen: Signup },
  chat: { screen: Chat },
  Error: { screen: Error },
};

const stack: NavigationNavigator<any, any> = createStackNavigator(screens);

const container: NavigationContainer = createAppContainer(stack);

export default container;

App.tsx：

import { StatusBar } from "expo-status-bar";
import React from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
import * as expoAppLoading from "expo-app-loading";
import loadFonts from "./assets/fonts/loader";
import Navigator from "./screens/navigator";

/**
 * This is the main app component of the Chill&chat application.
 */

const App: React.FC = () => {
  const [loading, setLoading] = React.useState(true);

  const style: any = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "center",

    },
    text: {
      fontFamily: "poppinsBold",
    },
  });

  if (loading) {
    return (
      <expoAppLoading.default
        startAsync={async (): Promise<void> => {
          await loadFonts();
        }}
        onFinish={(): void => {
          setLoading(false);
        }}
        onError={(): void => {
          Alert.alert("Error", "Error loading fonts");
        }}
      />
    );
  } else {
    return (
      <View style={style.container}>
        <Navigator />
        <StatusBar style="auto" />
      </View>
    );
  }
};

export default App;

Answer 1

您应该能够通过向所需元素的样式表添加百分比尺寸来设置宽度。然而，这可能需要您取消 Flex 布局，或者在父级中使用 Flex。

    container: {
      width:'100%',
    },

这应该可以解决宽度问题。

Answer 2

因为

alignItems: 'center'

上的

.container

风格。通过删除样式来修复它。