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

【问题标题】：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,
    },
});

【问题讨论】：

标签： reactjs react-native react-native-popup-dialog

【解决方案1】：

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

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

或

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

【讨论】：