将反应原生弹出窗口定位在屏幕底部

Posted 2023-03-15

【中文标题】将反应原生弹出窗口定位在屏幕底部

【英文标题】：Position react native popup at the bottom of the screen

【发布时间】：2018-03-15 09:37:09

【问题描述】：

我正在尝试使用此处找到的模块在我的 react 本机应用程序中显示一个弹出窗口：

https://github.com/jacklam718/react-native-popup-dialog

但是，我希望弹出窗口仅出现在屏幕底部。我在 popupStyle 中尝试了各种方法，但弹出窗口的位置始终保持在中心。是否可以将其位置更改为仅显示在屏幕底部。

index.js

import PopupDialog,  SlideAnimation, DialogTitle  from 'react-native-popup-dialog';
import  styles  from './styles';

....
<PopupDialog
  ref=(popupDialog) =>  this.popupDialog = popupDialog; 
  style=styles.popupDialogStyle
  dialogAnimation=slideAnimation
  height=150
  dialogTitle=<DialogTitle title="Select options" />
>

styles.js

export const styles = StyleSheet.create(
    popupDialogStyle: 
        backgroundColor: 'lightgray',
        marginTop: 100,
    ,
);

【参考方案1】：

根据Issue #89: How to position absolute，您需要使用任一

<PopupDialog 
  containerStyle= justifyContent: 'flex-end' 
/>

或

<PopupDialog 
  dialogStyle= position: 'absolute', bottom: 0 
/>