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

Question

How do we Boolean TextInput in react native. I tried to use radio button or checked button but i was unable to send selected data to server side when user clicked submit button on the form. If I use checked button the how do i know that button is checked by user ? I'm new to react native, it would be great help. I'm reading docs of react native but using boolen text input it was difficult for me to understand. Thank you.

I'm using Picker it would be great to know if there are better option

<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

Using Picker

The label for the Picker.Item is the text that is show to the user, so that always needs to be a string . But for the value prop, we can pass the boolean values true and false rather than a string . That's it!

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

Other Options

A dropdown menu isn't the most intuitive way to select a true / false value. I would say that a Switch is the best (though for some reason this isn't rendering right on expo Web).

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

Different components have different props, so check the docs to see if the value is a boolean , string , etc. For a single RadioButton , you use status={ status ? 'checked' : 'unchecked' } status={ status ? 'checked' : 'unchecked' } because it is controlled by the strings 'checked' and 'unchecked' .

Here's a demo showing four different options.