Reactjs 使用Next js和react native web的窄屏幕手机中超出屏幕的容器

我一直在使用Next.js和React Native web构建一个web应用程序，父容器显然适合桌面和某些手机，但对于一些屏幕较窄的手机（如galaxy s5、moto G4），我在下面添加屏幕截图以便更好地理解

桌面视图

移动视图（容器安装的位置）

移动视图（容器在屏幕外的位置）

添加的父容器样式：

 <View style={{ justifyContent: "center", alignItems: "center"}}>
      <View style={{ flex: 1,
    backgroundColor: "#FFF",
    maxWidth: "600px",
    paddingBottom: 100}>
       <Text>something....</Text>
</View>
</View>

某物

---

我是第一次使用Next.js，无法理解如何解决这个问题，如果有人能帮我解决这个问题，那就太好了。

你还有其他css吗？因为它看起来像是视图右侧有填充或边距，所以它会将其推到左侧！这是因为您设置了

maxWidth:“600px”，

。你应该移除它。为了使此页面更具响应性，当屏幕小于

600px

@AmilaSenadheera时，您应该将手机号码和城市输入容器的

flex direction

设置为

column

，即使我删除了maxwidth，它的行为也是一样的，因此我认为它与maxwidth无关，但如果您可以提供一些代码参考，想尝试一下，我没有任何地方添加填充或空白@jonas