javascript - 添加带有自定义文本的单选按钮

Question

我有一个带有图标和一些文本的组件。

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 进行测试，但它给了我一个关于无法识别的材料 ui 的错误。在我阅读完整错误之前，应用程序崩溃了。

我如何在这里使用单选按钮？我的组件应该看起来像现在的样子。

标签： javascriptreactjstypescriptreact-nativereact-native-paper