#javascript #ios #reactjs #react-native
#javascript #iOS #reactjs #react-native
Вопрос:
У меня есть кнопка гамбургера, которая запускает боковое меню в мобильном приложении. Кнопка не отвечает, когда для позиции установлено значение absolute. Я видел похожую проблему, в которой предлагается обернуть кнопку <View> </View>
и установить ее положение в абсолютное, однако в моем случае это не сработало. Кнопка не реагирует при нажатии на IOS. Android работает отлично
Фрагмент кода:
import React, { useState, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import Hamburger from "@psyycker/rn-animated-hamburger";
function HamburgerIcon({ navigation }) {
const [status, setStatus] = useState(false);
useEffect(() => {
const unsubscribe = navigation.addListener("drawerClose", (e) => {
setStatus(false);
});
return unsubscribe;
}, [navigation]);
async function callBack() {
setStatus(true);
navigation.toggleDrawer();
}
return (
<View style={styles.btnContainer}>
<View style={{ marginTop: 40, marginLeft: 20 }}>
<Hamburger
active={status}
type="spinArrow"
color="blue"
onPress={() => callBack()}
></Hamburger>
</View>
</View>
);
}
const styles = StyleSheet.create({
btnContainer: {
position: "absolute",
flex: 1,
},
});
Ответ №1:
Решается путем обтекания SafeAreaView
и установки zIndex
большого числа.
<SafeAreaView style={{ position: "absolute", margin: 40, marginLeft: 20, zIndex:99999 }}>
<Hamburger active={status}
type="spinArrow"
color="blue"
onPress={() => callBack()}
>
</Hamburger>
</SafeAreaView>