React native 对齐图像右上角的“关闭”按钮

如何在react native中对齐ImageBackground组件右上角的close按钮图标

代码：

<ImageBackground 
  source={require('../images/AppIntro/1.png')} 
  style={{ width: '100%', height: 150 }} 
>
  <TouchableOpacity>
    <Icon name="md-close" style={styles.closeButton} />
  </TouchableOpacity>
</ImageBackground>

编辑：我试图创建一个模式（弹出窗口），它将显示在按钮点击，所以绝对位置可能无法工作

<View>
    <Image
        source={require('../images/AppIntro/1.png')} 
        style={{ width: '100%', height: 150 }}
    />
    <Icon name="md-close" style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0
                        }} />
</View>

---

上面截取的代码会将您的图标水平和垂直居中放置在图像顶部。您可以调整顶部、左侧、右侧和底部，并将其移动到图像顶部的任何位置。

您需要使用

位置：“绝对”

将子对象与父对象中的任意位置对齐。在您的情况下，您需要使用

顶部

，和

右侧

以及

绝对位置

。考虑下面的例子：

<Parent>
  <Child style={{position: 'absolute', top: 5, right: 5}}>
    {...}
  </Child>
</Parent>

{...}

您可以阅读有关职位的更多信息

---

右上角的工作状态..

您看过应用样式的文档和flex box的文档了吗？那将是学习如何做你所要求的事情的最好地方。实际上，我正在尝试创建一个模式（弹出窗口），所以position:absolute在我的情况下可能不起作用。虽然我认为我可以将底部中间的关闭按钮对齐，这看起来也不错。我对此没有深入的了解，但定位文档说，值与下一个父元素有关，这意味着它取决于父视图，因此它是否会影响其模式？

<View>
    <Image
        source={require('../images/AppIntro/1.png')} 
        style={{ width: '100%', height: 150 }}
    />
    <Icon name="md-close" 
          style={{
                position: 'absolute',
                right: 5,
                top: 5,
          }} />
</View>