добавить переключатели с настраиваемым текстом - PullRequest
Новая
       47

добавить переключатели с настраиваемым текстом

2 голосов
/ 03 августа 2020

У меня есть компонент со значками и некоторым текстом. 

const criteriaList = [
  'New',
  'Freunde',
];

export const FilterCriteriaList: React.FunctionComponent = () => {
  //const [checked, setChecked] = React.useState('first');
  return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: string) => (
        <View key={item}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity
              style={styles.iconContainer}
              onPress={() => console.log('dhjksds')}>
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
            </TouchableOpacity>
            {/* <RadioButton
        value="first"
        //status={ checked === 'first' ? 'checked' : 'unchecked' }
        onPress={() => setChecked('first')}
      /> */}
            <Text style={styles.text}>{item}</Text>
          </View>
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
};

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

Итак, я пытаюсь использовать переключатели из 

import { RadioButton } from 'react-native-paper';

Я закомментировал TouchableOpacity и попытался использовать Radiobuttons для тестирования но это дает мне ошибку, касающуюся неузнаваемого пользовательского интерфейса материала. Приложение вылетает еще до того, как я смогу прочитать полную ошибку.

Как именно здесь можно использовать переключатели? Мой компонент должен выглядеть так, как сейчас. введите описание изображения здесь

...