反应原生中的布尔文本输入

Question

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

我正在使用 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 prop，我们可以传递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}
/>

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

这是一个演示，展示了四种不同的选项。