为什么这个TouchableOpacity的可触摸区域这么小

Question

当我按下TouchableOpacity时，它会高亮显示，但超过一半的时间，它不会记录press。

为什么可触摸区域这么小？感觉只有1 x 1像素。

我已经尝试了很多事情，比如使用<View>包装器，设置TouchableOpacity组件的width和height。

<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}
/>

Answer 1

TouchableOpacity具有本例中内容的大小，这意味着如果图标非常小，那么您的可触摸区域将非常小。我通常为图标设置一个正方形大小的容器样式，并在必要时增加的大小

<List.Item
onPress={undefined}
right={() => {
return (
<TouchableOpacity
onPress={() => console.log('press')}
style={{
top: 18,
right: 10,
position: 'absolute',
height: 20,
width: 20
}}
>
<FontAwesome name="trash" size={16} color="#FF0000" />
</TouchableOpacity>
);
}/>