时间戳

首页 > 解决方案 > 反应原生部分模态

react-native - 反应原生部分模态

问题描述

我正在使用反应导航开发一个反应原生应用程序。

当按下底部选项卡中的一个选项卡时，我想添加一个覆盖 30% 屏幕的部分模式，类似于 YouTube 应用中的“+”选项卡：

Youtube 模态

我尝试使用 react-native Modal 组件，但是

  1. 我在从底部选项卡激活它时遇到问题
  2. 它覆盖了整个屏幕

有什么建议么？

谢谢..

标签： react-nativemodal-dialogreact-navigation

解决方案

要回答您的问题 100% 正确，我需要了解有关您的项目的更多详细信息，但是，我可以尝试解释您的逻辑如何在没有任何库的情况下执行此操作。您可以创建另一个名为“Start”的组件，您将在导航器上方放置绝对位置的 Modal。您可以创建一个位于导航器上方的 Modal：


export const Start(){

return(
 <View style={{flex:1}}>
   <Modal>
<View/>
   </Modal>
<NavigatorComponent/>
</View>
)
}

这将起作用，因为当您将一个具有绝对位置的组件放在另一个组件之上时，该组件将位于下方组件的前面。在您的情况下，将停留在包括 TabBar 在内的所有内容的前面。对于模态框只有 30% 的高度，您只需在其样式中添加属性 height: '30%'。

在您的应用程序的初始组件（通常是 index.js 文件）中，您只需返回新的 Start 组件。

我希望你喜欢我的回答。拜托，如果你有更多的问题，你可以问。等待您的反馈意见 ：）。

推荐阅读