Textarea 多行输入

多行文本输入框，视觉与 Input 完全一致，但内置 multiline=true + 顶对齐 + [minHeight, maxHeight] 自适应。

单行内容请用 <Input />。Textarea 内部固定 multiline=true，不可关闭。

实时预览

下方渲染的就是 src/components/ui/Textarea/Textarea.tsx 本体。

idle · 默认 minHeight 96，约 5 行

filled · 已有内容

客户对产品反馈很积极…

error · 校验未通过

嗯

字数太少（≥10 字）

disabled · 整体灰化、不可编辑

只读不可编辑

状态

跟 Input 一致：idle / focus / filled / error / disabled。状态由 props 隐式驱动，无需业务管。

视觉规范

元素	规则
最小高度	96px (约 5 行；可用 minHeight 覆盖)
最大高度	不限 (传 maxHeight 后超出滚动)
圆角	8px
内边距	10 12px (左右 12px，上下 10px)
字号	15px (body)
文本对齐	顶部 (textAlignVertical='top'，跨平台统一)

用法

import { Textarea } from '@unif/react-native-design';

{/* 默认 minHeight=96 */}
<Textarea value={note} onChangeText={setNote} placeholder="详细说明…" />

{/* 固定区间高度（超出滚动） */}
<Textarea
  value={text}
  onChangeText={setText}
  minHeight={120}
  maxHeight={240}
  placeholder="可拖动滚动的长文本…"
/>

{/* 错误态 */}
<Textarea value={text} onChangeText={setText} error="字数太少（≥10字）" />

{/* 禁用 */}
<Textarea value={text} onChangeText={setText} disabled />

{/* forwardRef + focus */}
const textareaRef = useRef<TextInput>(null);
<Textarea ref={textareaRef} placeholder="内容" />
{/* 业务调 textareaRef.current?.focus() 主动聚焦 */}

API

TextareaProps = Omit<TextInputProps, 'style' | 'multiline' | 'numberOfLines'> + 这 7 个扩展（leading / trailing / error / minHeight / maxHeight / disabled / containerStyle）。multiline 已内置无需传；numberOfLines 故意 omit（用 minHeight / maxHeight 表达更直观）。下表最后的 testID 等来自透传的 TextInputProps。

Prop	Type	默认	说明
leading	ReactNode?	—	前置插槽（顶对齐渲染）
trailing	ReactNode?	—	后置插槽（如字符计数器）
error	string?	—	错误文字 —— 容器进入 error 态并在下方显示（"" / undefined 不进 error 态）
minHeight	number?	96	最小高度（约 5 行）；内部 input minHeight 减去上下 padding 后 Math.max(0, …) 保护
maxHeight	number?	—	最大高度，超过后内部滚动；不传则不限
disabled	boolean?	—	整体禁用 + 视觉变灰，优先级高于 editable
containerStyle	StyleProp<ViewStyle>?	—	容器外层样式（含 leading/trailing 整个 wrap）
testID	string?	—	测试定位（经 TextInputProps 透传；input 派生 ${testID}-input）

余下 RN TextInput props（value / onChangeText / placeholder / accessibilityLabel / autoFocus 等）均直接可用；仅 style / multiline / numberOfLines 被 omit。支持 ref（forwardRef 到内部 TextInput）。

无障碍（a11y）

来源：src/components/ui/Textarea/Textarea.tsx（薄 wrap）→ src/components/ui/TextField/TextFieldBase.tsx。

Textarea 是 <TextFieldBase multiline> 的薄封装，最终落到原生 <TextInput multiline>，因此继承 RN TextInput 内置的多行可编辑文本 a11y 语义——源码未硬编码 accessibilityRole。

• a11y props（继承）：TextareaProps = Omit<TextInputProps, 'style' | 'multiline' | 'numberOfLines'> + 扩展，{...props} 透传给 base 再到 <TextInput>，所以 RN 原生 a11y props（accessibilityLabel、accessibilityHint、placeholder 等）均可传入生效；Textarea 自身不新增专门 a11y prop。
• 状态语义：disabled 经 base 设 accessibilityState={{ disabled: true }} 并令 editable=false。error 只是视觉态 + 下方文案，源码未接入 a11y（无 accessibilityInvalid）。

// 传 RN 原生 accessibilityLabel；disabled 自动上报 a11y 禁用态
<Textarea value={note} onChangeText={setNote} accessibilityLabel="拜访备注" placeholder="详细说明…" />

跟 Input 的区别

维度	Input	Textarea
行数	单行（multiline 已 omit）	多行（内置 multiline=true）
高度策略	height 固定，默认 44	[minHeight, maxHeight] 自适应，默认 96
文本对齐	居中	顶对齐（跨平台统一）
适用场景	短文本（用户名 / 手机号 / 验证码）	长文本（备注 / 评论 / 反馈）