Как исправить блокировку осязаемой области с помощью SafeAreaView

#css #reactjs #react-native

Вопрос:

Я создаю приложение из React Native, и я добавил <TouchableOpacity> в него изображение с изображением внутри. Я добавил опору onPressIn для запуска некоторого кода при нажатии на изображение. Я дал изображение top: 10 , но всякий раз, когда я нажимаю на него, вероятность того, что оно сработает, составляет всего 10%.

Я попробовал переместить его вниз и заметил, что, когда изображение не близко <SafeAreaView> , я могу щелкнуть по нему, и это работает в 99,9% случаев. Мне было интересно, как я мог бы сделать так, чтобы он был как можно выше на экране, но при этом продолжал работать.

Вот код, если это поможет 🙂

 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',
    },
});
 

Комментарии:

1. вы можете увеличить значение zIndex осязаемой емкости

Ответ №1:

попробуйте увеличить стиль zIndex в осязаемой области… Я получил ответ от назмула из комментариев, но я действительно думал об этом до того, как прочитал комментарий назмула, так что ура!