时间戳

首页 > 解决方案 > React Native 中的底页覆盖 UI 元素

react-native - React Native 中的底页覆盖 UI 元素

问题描述

在 iOS 的某些应用程序中，我遇到了一种视图类型，即overlay another view, 和come from bottom of the screen. 当覆盖视图出现时，后面的视图被最小化。例如：

在此处输入图像描述 在此处输入图像描述在此处输入图像描述

我想在其中实现这个 UI 元素，react-native但找不到好的解决方案。到目前为止，我所取得的成就是bottom-sheet.

那么问题是这种类型的 UI 元素可以使用 react-native 来实现吗？如果是，您能否提供一些建议/库来实现这一目标？

标签： react-nativeuser-interfaceoverlaybottom-sheet

解决方案

实际上，这不是覆盖视图，它是 iOS 上的本机模式屏幕。此功能由导航库提供。如果您使用的是 wix/react-native-navigation，则可以使用 Navigation.openModal() 函数打开这种模式，如果您使用的是 react-navigation，则需要使用 react-native-screens 来获得原生外观模态并使用某些配置将组件注册为模态组件。例如：

<NativeStack.Screen
      name="Third"
      component={Second}
      options={{
        title: 'MODAL',
        stackPresentation: 'fullScreenModal',
        headerBackTitle: 'back',
        headerCenter: () => <Text>MODAL!!</Text>,
        headerHideBackButton: false,
        headerLeft: () => <Button title="Button" />,
        headerLargeTitle: true,
        headerShown: true,
        headerRight: () => <Button title="Back" onPress={() => null} />,
      }}
    />

推荐阅读