#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 в осязаемой области… Я получил ответ от назмула из комментариев, но я действительно думал об этом до того, как прочитал комментарий назмула, так что ура!