React-native zwei Ansichten mit Bild zwischen

Question

Ich bin neu zu reagieren native und ich möchte eine Seite, die im Grunde hat 2 View s und zwischen ihnen hat eine abgerundete Image (wie auf dem Bild), ich weiß, wie tun 2 View s aber ich weiß nicht, wie man das Image dort richtig setzt.

Answer 1

Dies sollte funktionieren:

<View style={{flex: 1}}> 
    <View style={{height: 200, backgroundColor: 'grey'}}></View> 
    <View style={{flexGrow: 1, backgroundColor: 'black', alignItems: 'center'}}> 
     <Image 
     source={require('./icon.png')} 
     style={{ 
      position: 'absolute', 
      top: -40, 
      height: 80, 
      width: 80}} 
     /> 
    </View> 
    </View>