簡體   English   中英

位置:“絕對”按鈕不適用於 IOS | 反應本機

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM