Блог

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

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

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

Вы можете использовать эту библиотеку для флажка » react-native-circle-checkbox»

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

        {this.state.currentTab === 1 amp;amp; (
                  <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

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

 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)
}
  

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

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