React Native - Impossible de placer l'icône au-dessus de l'image

Question

J'essaie de placer une icône sur une image, mais tout ce qu'elle fait, c'est pousser l'image sur la page.

Voici ce qu'il ressemble actuellement:

Je suis en train de placer la flèche arrière bleu au-dessus de cette image que vous pouvez voir.

Voici ce que mon code ressemble à:

<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> 
    ... 

Et voici mes styles:

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

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

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

Qu'est-ce que je fais mal?

Si je me débarrasse de l'icône, l'image montre comment je le veux, mais je voudrais aussi l'icône du bouton de retour sur le dessus. Voici à quoi il ressemble sans l'icône:

Answer 1

P osition Icon composant absolument. Je souhaite que l'image reste derrière la barre d'état comme elle le fait dans ma question mise à jour.

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

Answer 2

La barre d'état est toujours visible, même si vous utilisez position:'absolute'; zIndex: 99999 sur le bouton de retour, le 2 façons:

1. Retirez la barre d'état en ajoutant <StatusBar hidden={true}/> dans un render
2. Ajouter marginTop: 22 pour déplacer un peu vers le bas, flèche