TouchableOpacity 即使同时设置了宽度和高度，也会水平占据全长

Question

在我的 React Native 0.62.2 应用程序中，一个小 close-circle-outline 图标被添加到左上角的图像。图标的作用是点击删除图片。这是组件 DeleteButton:

const DeleteButton = (index) => {
    return (
    <TouchableOpacity style={styles.close} onPress={() => {deleteImage(index)}} >
        <Icon name='close-circle-outline' />
    </TouchableOpacity> 
    );
};
const style = StyleSheet.create({
    close: {
        margin: 3,
        position: "absolute",
        top: 0,
        left: 0,
        width: 15,
        height: 15,
        color: "tomato"
      },

close区域的宽度和高度都已设置样式。这是图标在 Android 模拟器上的样子：

close图标在左上角，点击后图片会被删除。我注意到，当我点击右上角时，图像被删除，这是不可取的，因为用户可能会意外删除图像。尝试将 flexDirection:'row' 添加到样式 close 中，但没有帮助。如何将TouchableOpacity的可点击区域限制在图标周围？

Answer 1

您更正后的代码....

const DeleteButton = (index) => {
    return (
    <TouchableOpacity style={style.close} onPress={() => {deleteImage(index)}} >
        <Icon name='close-circle-outline' />
    </TouchableOpacity> 
    );
};

const style = StyleSheet.create({
    close: {
        margin: 3,
        position: "absolute",
        top: 0,
        left: 0,
        width: 15,
        height: 15,
        color: "tomato"
      },

TouchableOpacity 即使同时设置了宽度和高度，也会水平占据全长

TouchableOpacity takes full length horizontally even with both width and height set

css

react-native

touchableopacity