Css 即使设置了宽度和高度，TouchableOpacity也会水平显示全长

在我的React Native 0.62.2应用程序中，在左上角的图像中添加了一个小的

闭合圆轮廓

图标。单击图标的目的是删除图像。下面是组件

删除按钮

：

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"
      },

constdeletebutton=（索引）=>{
返回(
{deleteImage（索引）}}>
);
};
const style=StyleSheet.create({
关闭：{
差额：3，
位置：“绝对”，
排名：0，
左:0,，
宽度：15，
身高：15，
颜色：“西红柿”
},

close

区域的宽度和高度都已按样式设置。以下是Android emulator上图标的外观：

---

关闭

图标位于左上角，当用户单击它时，图像将被删除。我注意到，当我单击右上角时，图像被删除，这是不可取的，因为用户可能会意外删除图像。尝试将

flexDirection:'row'

添加到样式

关闭

中，但没有帮助。如何操作要将

可触摸不透明度的可点击区域限制在图标周围？
您更正的代码

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"
      },

constdeletebutton=（索引）=>{
返回(
{deleteImage（索引）}}>
);
};
const style=StyleSheet.create({
关闭：{
差额：3，
位置：“绝对”，
排名：0，
左:0,，
宽度：15，
身高：15，
颜色：“西红柿”
},