![](/img/trans.png)
[英]React Native TouchableOpacity not working with position absolute
[英]position: "absolute" with Button is not working on IOS | React Native
我有一個漢堡按鈕,可以觸發移動應用程序中的側邊菜單。 當位置設置為絕對時按鈕不響應。 我見過類似的問題,建議用<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,
},
});
通過環繞SafeAreaView
並將zIndex
設置為高值來解決。
<SafeAreaView style={{ position: "absolute", margin: 40, marginLeft: 20, zIndex:99999 }}>
<Hamburger active={status}
type="spinArrow"
color="blue"
onPress={() => callBack()}
>
</Hamburger>
</SafeAreaView>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.