在屏幕底部定位反应本机弹出窗口

Question

我正在尝试使用此处找到的模块在我的 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,
    },
});

Answer 1

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

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

或

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

在屏幕底部定位反应本机弹出窗口

Position react native popup at the bottom of the screen

reactjs

react-native

react-native-popup-dialog