React Native Paper TextInput组件渲染高度过高如何解决？

问题现象 #

在React Native项目中引入react-native-paper的TextInput组件（outlined模式）时，组件未正常渲染为水平输入框，而是显示为高度异常的方块，异常渲染效果如下：

问题复现代码：

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

export default function SignUp() {
return (
    <View style={styles.container}>
      <Text>SIGN UP! NOW~~!!</Text>
      <TextInput mode="outlined" style={styles.inp} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  inp: {
    height: 1,
  },
});

问题根因 #

• 为TextInput设置height: 1属于无效配置：react-native-paper的outlined模式TextInput内置了最小高度、默认内边距规则，手动设置的极小固定高度会被组件内部样式逻辑覆盖，无法生效
• 未给输入框配置明确宽度，父容器设置alignItems: "center"时，组件尺寸计算逻辑异常，纵向会占用过量可用空间，最终渲染为超高方块

修复方案 #

• 移除输入框样式中不合理的height: 1配置，不要强行给组件设置远小于默认最小高度的固定height值
• 给输入框设置明确的横向宽度，避免布局计算异常
• 如果需要紧凑样式，可开启组件自带的dense属性，组件会自动调整内边距和高度到适配输入场景的尺寸

修复后可正常运行的代码参考：

import { StyleSheet, Text, View, Dimensions } from "react-native";
import { TextInput } from "react-native-paper";
import { useState } from "react";

const screenWidth = Dimensions.get('window').width;

export default function SignUp() {
  const [inputVal, setInputVal] = useState('');
  return (
    <View style={styles.container}>
      <Text>SIGN UP! NOW~~!!</Text>
      <TextInput 
        mode="outlined" 
        dense
        style={styles.inp} 
        value={inputVal}
        onChangeText={setInputVal}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  inp: {
    width: screenWidth * 0.9,
  },
});

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