React Native中有<label>标签吗？

Question

我正在 React Native 中制作一个表单。
在（非原生）React 中这种形式的字段将如下所示：

<div>
  <label htmlFor="lastName">Last Name:</label>
  <input type="text" id="lastName" />
</div>

或者简单的

html

：

<div>
  <label for="lastName">Last Name:</label>
  <input type="text" id="lastName">
</div>

我发现标签对于可访问性来说很重要。 我发现的每个教程都只使用占位符，并且我在 React Native 文档中找不到

<label>

的任何参考。 当用户开始输入时，占位符就会消失，这使得页面难以访问。

<label>

标签还具有单击时将焦点定向到输入的优点。
这意味着单击

<label htmlFor="lastName">Last Name:</label>

会提示用户在字段

<input type="text" id="lastName" />

中输入。

出于这些原因，使用

<Text>

标签作为

<label>

并不理想。

Answer 1

我想说，在语义和可访问性方面最接近的可能方法是：

<View>
  <Text aria-label="Label for Username" nativeID="labelUsername">Username</Text>
  <TextInput aria-label="input" aria-labelledby="labelUsername" />
</View>

Answer 2

您可以使用

<View>

作为您的

<div>

和

<Text>

作为您的

<label>

。

<input>

是

<TextInput>

然后您只需根据需要设置元素的样式即可。