React Native中是否支持<label>标签？如何实现表单标签关联功能？

React Native 没有内置和Web端<label>完全对等的开箱组件，但要实现你要的点击标签聚焦输入、无障碍读屏支持的效果非常简单，完全没必要靠placeholder凑字段提示。直接用无包装的<Text>组件当标签的方案确实不可行，既没有点击聚焦的交互，也没法让读屏工具识别文本和输入框的关联关系。

无依赖原生实现方案 #

核心逻辑分两部分：

1. 给输入框绑定ref，用可点击组件包裹标签文本，点击时手动触发输入框聚焦
2. 配置官方无障碍属性，把标签和输入框做关联，让读屏工具可以正确识别字段含义

参考实现代码：

import { useRef } from 'react';
import { View, Text, TextInput, Pressable } from 'react-native';

export default function LastNameField() {
  const inputRef = useRef<TextInput>(null);
  // 标签唯一标识，用于无障碍关联
  const LABEL_NATIVE_ID = 'field-lastname-label';

  return (
    <View style={{ marginVertical: 8 }}>
      {/* 用Pressable包裹标签文本，点击时触发输入框聚焦 */}
      <Pressable onPress={() => inputRef.current?.focus()}>
        <Text 
          nativeID={LABEL_NATIVE_ID}
          style={{ fontSize: 16, marginBottom: 4 }}
        >
          Last Name:
        </Text>
      </Pressable>
      <TextInput
        ref={inputRef}
        nativeID="field-lastname"
        // 关联对应标签，读屏设备聚焦输入框时会自动朗读标签内容
        accessibilityLabelledBy={LABEL_NATIVE_ID}
        style={{
          borderWidth: 1,
          borderColor: '#e5e7eb',
          borderRadius: 4,
          padding: 10,
          fontSize: 16
        }}
      />
    </View>
  );
}

这个方案完全覆盖Web端label的核心能力：

• 点击标签文本会自动把焦点移到输入框，直接唤起键盘输入
• 读屏工具可以正确识别字段和标签的关联关系，不会出现用户聚焦输入框后听不到字段说明的问题
• 标签永久可见，不会像placeholder一样用户开始输入就消失，不管是视障用户还是普通用户都能清楚知道当前字段的含义

其他可选方案 #

如果项目已经在使用成熟的表单/UI组件库，这类库的表单字段组件一般已经内置了上述逻辑：

• 使用React Hook Form、Formik这类表单库搭配React Native Paper、NativeBase这类组件库时，直接调用库提供的FormField/Input组件，传入label属性即可，不需要自己手动处理聚焦和无障碍关联。

注意：网上很多教程只用placeholder做字段提示是偷懒的写法，完全不符合无障碍规范，placeholder只能作为字段的补充提示信息，不能替代永久可见的标签，否则不仅视障用户无法正常使用，普通用户在输入多个字段后也很容易混淆每个输入框对应的含义。

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