如何修复 TouchableOpacity 被 SafeAreaView 阻止答案

【问题标题】：How do you fix TouchableOpacity getting blocked by SafeAreaView如何修复 TouchableOpacity 被 SafeAreaView 阻止
【发布时间】：2021-07-01 01:54:24
【问题描述】：

我正在使用 React Native 制作一个应用程序，并且我添加了一个 <TouchableOpacity>，其中包含一个图像。我添加了一个 onPressIn 道具来在图像被按下时运行一些代码。我给了图片一个top: 10，但每当我点击它时，它只有 10% 的机会工作。

我尝试将其向下移动，我注意到当图像不靠近<SafeAreaView> 时，我可以单击它，并且它在 99.9% 的时间都有效。我想知道如何才能使它尽可能高地显示在屏幕上，但仍然可以使用 onPressIn。

如果有帮助，这里是代码:)

import React from 'react';
import { StyleSheet, Text, View, Button, Image, TouchableOpacity, SafeAreaView} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import Constants from "expo-constants";
import styled from "styled-components";

const StatusBarHeight = Constants.statusBarHeight;

var onPressSettings=() => {
    alert("KING KOVID");
}

const HomeScreen = ({navigation}) => {
    return(
        <SafeAreaView style={Styles.container}>
        <TouchableOpacity onPressIn={() => {onPressSettings();}} activeOpacity={0.5}>
                <Image
                    source={require('../assets/app_icons/settings.png')} 
                    style={{ width: 40, height: 40, position: 'absolute', right: 20, top: 10}}
                    resizeMode="contain"
                    resizeMethod="resize"
                />
        </TouchableOpacity>
            <Text style={{fontSize: 30}}>SocialSquare</Text>
            <Text>Home Screen</Text>
            <Image
                source={require('../assets/doge.gif')}
                resizeMode = 'contain'
                style={{
                    width: 200,
                    height: 200,
                }}
            />
        </SafeAreaView>
    );
};

export default HomeScreen;

const Styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 25,
        backgroundColor: '#08F1ED',
    },
});

【问题讨论】：

你可以增加 TouchableOpacity 的 zIndex 值

标签： css reactjs react-native

【解决方案1】：

尝试在 TouchableOpacity 上增加 zIndex 样式...我从 cmets 的 nazmul 那里得到了答案，但在我阅读 nazmul 的评论之前我真的想到了这一点，所以干杯！

【讨论】：