React Native注册表单垂直居中失效问题求助

问题描述 #

注册表单无法在任意屏幕尺寸下实现垂直居中，需调整样式代码确保布局生效。

修复后的完整代码 #

import React, { useState } from "react";
import { Button, View, Text, TextInput, StyleSheet } from "react-native";

const RegisterScreen = () => {
  const [person1, setPerson1] = useState("");
  const [person2, setPerson2] = useState("");

  const handleSubmit = () => {
    console.log("Person 1:", person1);
    console.log("Person 2:", person2);
    // 可在此添加表单提交或验证逻辑
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>注册页面</Text>
      <View style={styles.formContainer}>
        <TextInput
          placeholder="Person 1"
          onChangeText={setPerson1}
          style={styles.textInput}
        />
        <TextInput
          placeholder="Person 2"
          onChangeText={setPerson2}
          style={styles.textInput}
        />
        <View style={styles.buttonContainer}>
          <Button title="提交" onPress={handleSubmit} />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  title: {
    fontSize: 24,
    marginBottom: 32,
  },
  formContainer: {
    width: "80%",
    alignItems: "center",
    gap: 16,
  },
  textInput: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 4,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  buttonContainer: {
    width: "100%",
  },
});

关键修复说明 #

• 给formContainer设置width: "80%"：原代码中表单容器无宽度设定，导致textInput的width:100%失去参考基准，设置后输入框能在固定范围内显示，保证整体居中效果。
• 给formContainer添加gap:16：统一控制表单内元素间距，避免逐个设置margin，布局更简洁规整。
• 为textInput添加边框和内边距：默认TextInput无视觉样式，添加后表单元素更清晰，符合常规设计逻辑。
• 设置buttonContainer宽度为100%：让按钮撑满表单容器宽度，保持布局一致性。
• 调整title的marginBottom：增大标题与表单的间距，提升页面视觉层次感。

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