What do positon & wrapperStyle do? - UnPourTous/react-native-popup-stub GitHub Wiki

English Version

Each layer of popup contains two children: fullscreen mask (optional) and an animated wrapper.

Your popup component is in the animated wrapper.

wrapperStyle is for the wrapper, usually for its position related styles.

The position option is just a shorthand.

e.g. position: 'bottom' is equal to position: 'absolute', left: 0, right: 0, bottom: 0 in wrapperStyle, which means 100% width in the bottom of screen.

For full definition, please view lib/util/createWrapperStyle.js

中文版

每一个popup层，都是全屏的，它包含两个子元素：一个全屏蒙层（可选）和一个动画容器。

你的自定义popup（比如Toast，为免混淆，以下称component）就在那个动画容器里。

wrapperStyle对应动画容器的样式，而position选项是对绝对定位方式的一种预定义。

比如，position: 'bottom'等价于position: 'absolute', left: 0, right: 0, bottom: 0，意思是component居于屏幕底部，占100%宽度，高度自适应。

具体的实现，请查看文件lib/util/createWrapperStyle.js。