React Native - 无法将图标放在图像顶部答案

【问题标题】：React Native - Can't place icon on top of imageReact Native - 无法将图标放在图像顶部
【发布时间】：2017-06-21 19:57:49
【问题描述】：

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

这是它目前的样子：

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

这是我的标记的样子：

<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,
},

我做错了什么？

如果我去掉图标，图像会显示我想要的样子，但我也想在它上面放一个后退按钮图标。这是没有图标时的样子：

【问题讨论】：

标签： reactjs react-native react-native-ios react-native-image

【解决方案1】：

绝对定位Icon组件。

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

【讨论】：

【解决方案2】：

状态栏始终可见，即使您在返回按钮上使用position:'absolute'; zIndex: 99999，也有两种方式：

通过在渲染中添加 <StatusBar hidden={true}/> 来移除状态栏
添加marginTop: 22 将箭头向下移动一点

【讨论】：

我希望图像保留在状态栏后面，就像它在我更新的问题中所做的那样。那是设计的一部分，我只是不希望当我在它上面添加一个图标时它被推下。请查看我更新的问题
@Thomas 明白了，我误解了这个问题，无论如何 Andreyco 的回答应该会有所帮助