TouchableOpacity и onPress для иконок

Я пытаюсь использовать onPress для иконок. Для этого я подумал об использовании TouchableOpacity, но ничего не происходит, когда я нажимаю на значок. Я не вижу журналов консоли.

Я также пытался обернуть значок в дополнительный вид, но это тоже не работает.

const criteriaList = [
    "Nur Frauen",
    "Freunde Zweiten Grades",
]


export const FilterCriteriaList: React.FunctionComponent = () => {
  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>
              <Text style={styles.text}>{item}</Text>
              </View>
              <View style={styles.horizontalLine} />
         </View>
      ))}
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  criteriaRow: {
      flexDirection: 'row',
      paddingLeft: moderateScale(25),
  },
  horizontalLine: {
    width: '100%',
    height: moderateScale(1),
    backgroundColor: '#E0E0E0',
  },
  text: {
    paddingLeft: moderateScale(15),
    paddingBottom: moderateScale(15),
    marginBottom: moderateScale(15),
    paddingTop: moderateScale(15),
  },
  icon: {
      paddingTop: moderateScale(12),
  },
  iconContainer: {
      backgroundColor: 'red',
  }
});

введите здесь описание изображения

Это выглядит так, и я нажимаю в середине значка кружка.

Что еще я могу попробовать?

введите здесь описание изображения


react-native reactjs typescript javascript native-base
person Jnl    schedule 03.08.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что значок перезаписывает сенсорный компонент. Для осязаемой непрозрачности не предусмотрены высота и ширина. Так оно и спряталось за иконой. Укажите высоту и ширину в стилях TouchableOpacity. Он должен работать.

Добавьте цвет фона в TouchableOpacity во время отладки, чтобы получить четкое представление о макете TouchableOpacity.

person Dhevendhiran M    schedule 03.08.2020
comment
Добавление background-color предназначено для целей отладки. Предлагаемый обходной путь — добавить ширину и высоту сенсорной непрозрачности. - person Dhevendhiran M; 03.08.2020
comment
Я только что видел картинку с фоновым цветом. Вы добавили его в Touchable Opacity? Не могли бы вы также обновить свой код, чтобы получить четкое изображение? - person Dhevendhiran M; 03.08.2020
comment
Это выглядит странно. Несколько TouchableOpacity спряталось за каким-то представлением. Попробуйте добавить zIndex к компоненту. iconContainer: { backgroundColor: 'красный', zIndex: 1} - person Dhevendhiran M; 03.08.2020
comment
Можете ли вы сказать, откуда у вас импорт touchableopacity? - person mainak; 03.08.2020
comment
snack.expo.io/dpmUu3!s4 создал закуску в точно таком же стиле. Как ни странно, это работает здесь, но не в моем симуляторе. Есть идеи, почему это может быть? Я даже пытался добавить touchableOpacity к тексту и всей строке. Тем не менее, я не могу нажать на них. @DhevendhiranM - person Jnl; 04.08.2020
comment
из «реагировать на родной обработчик жестов»; @майнак - person Jnl; 04.08.2020
comment
Измените это с «реагировать-родной» - person mainak; 04.08.2020
comment
Хорошо.. позвольте мне попробовать от себя - person mainak; 04.08.2020
comment
@DhevendhiranM добавление zIndex ко всему представлению, содержащему этот компонент, сработало - person Jnl; 04.08.2020

arrow_upward
0
arrow_downward

Попробуйте это... будите меня... Я только что сменил консоль на оповещение и немного css

return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item, index) => (
        <View key={index}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity
              style={styles.iconContainer}
              onPress={() => alert("ff")}
            >
              <Icon
            style={styles.icon}
            name="circle-thin"
            color="#31C283"
            size={20}
          />
            </TouchableOpacity>
            <Text style={styles.text}>{item}</Text>
          </View>
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  criteriaRow: {
    flexDirection: "row",
    padding: 25,
    alignItems: "center",
  },
  horizontalLine: {
    width: "100%",
    height: 1,
    backgroundColor: "#E0E0E0",
  },
  text: {
    paddingLeft: 15,
    paddingBottom: 15,
    marginBottom: 15,
    paddingTop: 15,
  },
  icon: {
    padding: 12,
  },
  iconContainer: {
    backgroundColor: "red",
  },
});
person mainak    schedule 04.08.2020
comment
Не могли бы вы указать, какие изменения вы внесли в стиль? Я вижу только это добавленное ``` alignItems: center``, оно все еще не работает для меня. Проблема не в предупреждении или журнале. Я просто не могу пока "щелкнуть" или "нажать" на иконку - person Jnl; 04.08.2020
comment
Этот стиль здесь не обязателен... вы можете его игнорировать. Но я не вижу, чтобы что-то не работало... Можете ли вы изменить свою часть значка на просто представление только с высотой и шириной... внутри сенсорного - person mainak; 04.08.2020
comment
Я пробовал это раньше, но это не сработало. Теперь мне помогло добавление zIndex ко всему представлению, содержащему этот компонент. - person Jnl; 04.08.2020