Как использовать флажки в реагировать родной для Android и IOS?

Question

В моем приложении есть модал с различными вкладками, в котором пользователь может фильтровать результаты поиска по категориям в модале. сейчас это работает, но я просто помещаю событие в <TEXT>, мне нужна визуальная подсказка, например, флажок для моих опций

            {this.state.currentTab === 1 && (
              <View>                         
                <Text onPress={(text) => this.setGender(true)}>male</Text>
                <Text onPress={(text) => this.setGender(false)}>female</Text>
              </View>
            )}

Как я могу использовать флажок вместо <TEXT> для использования как в Android, так и в IOS?

Answer 1

Вы можете использовать эту библиотеку для галочки "response-native-circle-checkbox"

import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox';

        {this.state.currentTab === 1 && (
                  <View>
                    <CircleCheckBox
              checked={true}
              onToggle={(text) => this.setGender(true)}
              labelPosition={LABEL_POSITION.RIGHT}
              label="MALE"
            />    
    <CircleCheckBox
              checked={true}
              onToggle={(text) => this.setGender(false)}
              labelPosition={LABEL_POSITION.RIGHT}
              label="FEMALE"
            />  
                  </View>
                )}

Пример: https://snack.expo.io/@msbot01/intrigued-marshmallows

Answer 2

Используйте этот компонент, который я создал вручную.Он отображает один и тот же переключатель на обеих платформах

const RenderRadio = (props) => {
  const {
     value, onChange, selectedValue
  } = props;
const checked = value === selectedValue;
  return (
    <TouchableOpacity
      style={{ flexDirection: 'row' }}
      onPress={() => onChange(value)}
    >
      <View
        style={{
          width: 20,
          height: 20,
          borderRadius: 10,
          borderWidth: 2,
          borderColor: '#002451',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <View
          style={{
            width: 10,
            height: 10,
            borderRadius: 5,
            backgroundColor: checked ? '#002451' : 'white',
          }}
        />
      </View>
      <Text style={{ fontSize: 15, marginLeft: 10 }}>{value}</Text>
    </TouchableOpacity>
  );
};

, используйте его как

   <RenderRadio onChange={this.setSelectedValue} selectedValue={selectedValue} value={value}/>

и установите выбранное значение как

   setSelectedValue = (value) => {
     this.setState(selectedValue : value)
}

Answer 3

Вы можете использовать библиотеку native-base, которая имеет больше компонентов, которые вы можете использовать для фильтров поиска, и это более надежно, вы можете установить ее проверенной используя проверенную проп, это логическое значение, например:

import {
  Icon,
  CheckBox,
  Spinner
} from "native-base";
 <TouchableOpacity   onPress={(text) => this.setGender(true)}       >
          <CheckBox checked ={tru}
            onPress={(text) => this.setGender(true)}                          />
  
        </TouchableOpacity>