3

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

这是它目前的样子:

在此处输入图像描述

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

这是我的标记的样子:

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

我究竟做错了什么?

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

在此处输入图像描述

4

2 回答 2

8

Icon绝对定位组件。

<Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} style={{ position: 'absolute', top: 30, left: 10 }} />
于 2017-06-21T20:17:43.977 回答
1

The StatusBar is always visible, even if you use position:'absolute'; zIndex: 99999 on back button, the are 2 ways:

  1. Remove status bar by adding <StatusBar hidden={true}/> inside a render
  2. Add marginTop: 22 for moving arrow a little downward
于 2017-06-21T20:06:43.450 回答