将 `CROSS` 放在模态框之外

【问题标题】：Place the `CROSS` outside the modal将 `CROSS` 放在模态框之外
【发布时间】：2020-09-11 11:49:53
【问题描述】：

我使用react-native-modal，我怎样才能将CROSS放在模态框之外，在背景的角落？如果我使用absolute定位，那么CROSS是在背景层下找到的。

      <>
        <TouchableOpacity style={styles.cross}>
          <Image source={CROSS} />
        </TouchableOpacity>
        <Modal>
         {....}
        </Modal>
      </>

const styles = StyleSheet.create({
  cross: {
    position: 'absolute',
    zIndex: 100,
    elevation: 100,
  },
});

【问题讨论】：

标签： javascript react-native react-native-modal

【解决方案1】：

您必须在模态框内放置十字。模态占据整个屏幕。而模态内容的其他内容作为兄弟放在旁边。：

<Modal>
  <TouchableOpacity style={styles.cross}>
    <Image source={CROSS} />
  </TouchableOpacity>
 {....}
</Modal>

【讨论】：

不工作。无论十字在哪里，背景都占据了整个屏幕空间
那么你必须在模态框内放置十字。模态占据整个屏幕。模态内容的其他内容作为兄弟放在交叉旁边。