图标的 TouchableOpacity 和 onPress

Posted 2023-03-13

【中文标题】图标的 TouchableOpacity 和 onPress

【英文标题】：TouchableOpacity and onPress for Icons

【发布时间】：2020-11-23 09:10:48

【问题描述】：

我正在尝试将 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',
  
);

看起来像这样，我点击了圆圈图标的中间。

我还能尝试什么？

【参考方案1】：

我认为图标正在覆盖可触摸组件。可触摸的不透明度没有提供高度和宽度。所以它隐藏在图标后面。在 TouchableOpacity 的样式中提供一些高度和宽度。它应该可以工作。

在调试时为 TouchableOpacity 添加一些背景颜色，以便您可以清楚地看到 TouchableOpacity 布局。

【讨论】：

添加背景色是为了调试。建议的解决方法是为可触摸的不透明度添加一些宽度和高度。

我刚看到背景颜色图片。您是否已将其添加到 Touchable Opacity 中？您能否更新您的代码以获得清晰的图片？

看起来很奇怪。有些 TouchableOpacity 隐藏在某些视图后面。尝试将 zIndex 添加到组件中。 iconContainer: backgroundColor: 'red', zIndex: 1

你能说你从哪里导入 touchableopacity 吗？

snack.expo.io/dpmUu3!s4 制作了一款样式完全相同的小吃。奇怪的是，它在这里有效，但在我的模拟器中无效。任何想法为什么会这样？我什至尝试将 touchableOpacity 添加到 Text 和整行。尽管如此，我还是无法点击它们。 @DhevendhiranM

【参考方案2】：

试试这个......为我工作......我刚刚将控制台更改为警报和一些 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",
  ,
);

【讨论】：

您能具体说明您对样式所做的更改吗？我只看到这个添加了```alignItems：“center”```它仍然对我不起作用。问题不是警报或日志。我现在不能“点击”或“按下”图标

这种风格在这里不是强制性的……你可以忽略它。但我没有看到任何不工作的东西......你可以将你的图标部分更改为只有高度和宽度的视图......里面可触摸

我之前尝试过，但没有成功。向包含此组件的整个视图添加 zIndex 现在对我有用。