当呈现模态、iOS 操作表、选择器组件时，React Native 上的浮动按钮 (FAB) 不会停留在顶部

Question

在高阶组件中使用 absolute 定位按钮将在正常用例中发挥作用，但当呈现 modal/actionsheet/picker 等时，按钮不再停留在顶部.

Answer 1

很遗憾，这是不可能的。模态框、操作表和警报在新的 window 中呈现，具有更高的 level and so they will cover everything. You also can't insert a window with a higher level containing your FAB, because then touch events wouldn't make it down to your regular view. More documentation on this here。

我还认为您不应该尝试完成此操作。屏幕截图中的动作选择器应该完全覆盖该动作按钮，如果您要呈现模式，那么您总是可以尝试向其添加新的 FAB。

Answer 2

免责声明： 这样做几乎肯定会导致您的应用程序被应用程序商店拒绝，因此您应该确保它只出现在测试版和内部版本中。如果你需要它被苹果接受，我会推荐通过 React Native 实现 UIActionSheets 和 UIAlerts；有很多很好的库可以模拟模态。

您需要在本机端执行此操作。您可以将以下代码添加到您的 AppDelegate 中：

var debugWindow: UIWindow?

@objc func pressButton(_ sender: UIButton) {
    print("Do debugging here")
}

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let screenSize = UIScreen.main.bounds

    let buttonController = UIViewController()
    let button = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
    button.setTitle("+", for: .normal)
    button.backgroundColor = UIColor.blue
    button.addTarget(self, action: #selector(pressButton(_:)), for: .touchUpInside)
    button.layer.cornerRadius = 25
    button.layer.masksToBounds = true
    buttonController.view = button

    debugWindow = UIWindow.init(frame: CGRect(x: screenSize.width - 100, y: screenSize.height - 100, width: 50, height: 50))
    debugWindow!.rootViewController = buttonController
    debugWindow!.windowLevel = UIWindow.Level.alert + 1000;
    debugWindow!.makeKeyAndVisible()

    return true
}

这将创建一个无论显示什么模式都可以点击的按钮：

当呈现模态、iOS 操作表、选择器组件时，React Native 上的浮动按钮 (FAB) 不会停留在顶部

Floating button(FAB) on React Native wont stay on top when a Modal, iOS Actionsheet, picker component is rendered

android

ios

floating-action-button

react-native