React Native中的底层覆盖UI元素

Question

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

​

​

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

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

Answer 1

实际上，这不是一个覆盖视图，它是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} />,
      }}
    />

Answer 2

我想通了。它实际上是使用screenOptions中的transition presets的模式(presentation modal)。这就是我们使用react-navigation实现这一点的方法

<AppStack.Navigator
    initialRouteName="Main"
    screenOptions={{
        headerShown: false,
        gestureEnabled: true,
         cardOverlayEnabled: true,
         ...TransitionPresets.ModalPresentationIOS
    }}
     headerMode='none'
     presentation="modal"
>
    <AppStack.Screen name="Main" component={Main} />
</AppStack.Navigator>