React Native - 无法在图像顶部放置图标

Question

我试图在图片上放置一个图标，但它所做的就是将图像向下推到页面上。

这是目前的样子：

我试图将蓝色后箭头放在该图像的顶部，如您所见。

这是我的标记的样子：

<ScrollView style={ styles.container }>
  <View style={ styles.coverImageContainer }>
    <Image
      style={ styles.coverImage }
      source={ require('./img.jpg') }
    >
      <View>
        <Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} />
      </View>
    </Image>
  </View>
  ...

这是我的风格：

container: {
  backgroundColor: '#f9f9f9',
  flex: 1,
},

coverImageContainer: {
  backgroundColor: '#000',
},

coverImage: {
  width: null,
  height: 170,
  resizeMode: 'cover',
  opacity: 0.7,
  flex: 1,
},

我做错了什么？

如果我摆脱了图标，图像会显示我想要的图像，但我也希望它上面有后退按钮图标。这是没有图标的样子：

Answer 1

绝对定位Icon组件。

<Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} style={{ position: 'absolute', top: 30, left: 10 }} />

Answer 2

即使您在后退按钮上使用position:'absolute'; zIndex: 99999，StatusBar也始终可见，有两种方式：

1. 通过在呈现
中添加<StatusBar hidden={true}/>来删除状态栏
2. 添加marginTop: 22以向下移动箭头