React Native中如何实现文本输入框内文本垂直居中？

你当前通过父容器justifyContent: 'center'实现文本垂直居中的方案是有效的，但还有几种更贴合TextInput组件特性、适配不同场景的实现方式，以下是具体方案：

方案1：使用TextInput自带的textAlignVertical属性（最直接） #

React Native的TextInput原生支持textAlignVertical属性，专门用于控制文本垂直对齐，无需依赖父容器布局，是最直接的解决方案。

修改代码如下：

const CustomInput = ({ value, setValue, placeholder, secureTextEntry }) => {
  return (
    <View style={styles.container}>
      <TextInput
        value={value}
        onChangeText={setValue}
        placeholder={placeholder}
        style={styles.input}
        secureTextEntry={secureTextEntry}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: "100%",
    borderColor: "blue",
    borderWidth: 2,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginVertical: 10,
    height: "10%",
    // 可移除justifyContent: "center"
  },
  input: {
    textAlignVertical: 'center', // 核心属性
    flex: 1, // 让输入框占满父容器空间，确保对齐生效
  },
});

适用场景：所有需要垂直居中的输入框场景，尤其是父容器包含其他子元素时，不会干扰整体布局。

方案2：通过lineHeight匹配输入框高度（固定高度场景） #

如果输入框高度固定（比如你用的height: "10%"），可以将TextInput的lineHeight设置为与输入框高度一致（若容器有paddingVertical，需用容器高度减去两倍内边距值），文本会自动垂直居中。

示例代码：

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: "100%",
    borderColor: "blue",
    borderWidth: 2,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginVertical: 10,
    height: 50, // 固定高度示例
  },
  input: {
    lineHeight: 50, // 与容器高度匹配
  },
});

适用场景：固定高度的输入框，且字体大小固定的场景。

方案3：用内边距替代固定高度（自适应场景） #

如果不需要固定输入框高度，推荐使用paddingVertical控制输入框的上下空间，文本会自然垂直居中。这种方式更灵活，能适配不同字体大小和设备尺寸。

示例代码：

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: "100%",
    borderColor: "blue",
    borderWidth: 2,
    borderRadius: 5,
    paddingHorizontal: 10,
    paddingVertical: 12, // 上下内边距控制输入框高度
    marginVertical: 10,
    // 移除固定height属性
  },
  input: {
    fontSize: 16,
  },
});

适用场景：需要输入框高度随字体大小自适应，或希望布局更灵活的场景。

现有方案的优化 #

你当前的父容器justifyContent: 'center'方案本身可行，但建议给TextInput添加flex: 1，确保输入框占满父容器可用空间，避免因输入内容过少导致的布局偏移：

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    // 其他样式不变
  },
  input: {
    flex: 1, // 添加该行
  },
});

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