反应原生的布尔文本输入

Question

我们如何在 React Native 中使用 Boolean TextInput？我尝试使用单选按钮或选中按钮，但是当用户单击表单上的提交按钮时，我无法将选定的数据发送到服务器端。如果我使用选中的按钮，我怎么知道该按钮已被用户选中？我是新手反应原生，这将是一个很大的帮助。我正在阅读 react-native 的文档，但使用布尔文本输入我很难理解。谢谢。

我正在使用 Picker，很高兴知道是否有更好的选择

<Picker
  selectedValue={status}
  style={{ height: 50, width: 150 }}
  onValueChange={(itemValue) => setStatus(itemValue)}>
  <Picker.Item label="True" value="True" />
  <Picker.Item label="False" value="False" />
</Picker>;

Answer 1

使用选择器

Picker.Item 的 label 是向用户显示的文本，因此始终需要是 string。但是对于value 属性，我们可以传递boolean 值true 和false 而不是string。就是这样！

<Picker
  selectedValue={status}
  style={{ height: 50, width: 150 }}
  onValueChange={setStatus}>
  <Picker.Item label="True" value={true} />
  <Picker.Item label="False" value={false} />
</Picker>

其他选项

下拉菜单不是选择true/false 值的最直观方式。我会说Switch 是最好的（尽管由于某种原因，这不能在 expo Web 上正确呈现）。

<Switch
  value={status}
  onValueChange={setStatus}
/>

不同的组件有不同的props，所以检查文档看看值是否是boolean、string等。对于单个RadioButton，你使用status={ status ? 'checked' : 'unchecked' }，因为它是由字符串@控制的987654341@和'unchecked'。

Here's a demo 显示四个不同的选项。