Platzieren von Textfeld oben auf Bild

Question

ich folgendes haben Reagieren nativem Code:

 <View style={itemStyle.content}> 
      <Text 
       style={textIndexStyle.content}> 
       {this.props.element["indexNumber"] + 1} 
      </Text> 

      <Image 
       source={{uri: someUri}} 
       style={imageStyle.content} 
      /> 

     </View> 

Mit diesem Styling:

const imageStyle = StyleSheet.create({ 
    content:{ 
     alignSelf: 'flex-end', 
     justifyContent:'flex-end', 
     backgroundColor: '#7CFC00',//light green 
     width: '100%', 
     height: '75%', 
     resizeMode: 'contain', 
     flexBasis: '50%' 
    } 
}); 


const textIndexStyle = StyleSheet.create({ 
    content:{ 
     // position: 'absolute', 
     // transform: ('50%', '50%'), 
     alignSelf: 'flex-start', 
     backgroundColor: '#ffa500', 
     textAlign: 'center', 
     fontSize: 20, 
     fontWeight: 'bold', 
     width: getPercentageOfSmallest(0.07), 
     height: getPercentageOfSmallest(0.07) 
    } 
}); 

const itemStyle = StyleSheet.create({ 
    content:{ 
     flexDirection:'column', 
     alignItems:'flex-start', 
     justifyContent:'flex-start', 
     backgroundColor: '#9400D3',//purple 
     paddingRight: '10%', 
     // marginTop: -50, 
     width: getPercentageOfWidth(0.7), 
    } 
}); 

Das Ergebnis ist dieses:

Ich möchte, dass die orangefarbene Box mit der Nummer in den Bildcontainer (auf der Gr einen Hintergrund), anstatt darüber (auf dem violetten Hintergrund).

Wie es in dem kommentierten Code zu sehen ist, habe ich versucht:

• machen die Position absolut und dann übersetzt die Box

einen negativen Rand für den äußeren Behälter Einstellung Das hat jedoch nicht funktioniert.

Irgendeine Idee, wie ich die orange Box mit dem Text machen kann, der auf das Bild gesetzt wird?

Answer 1

Versuchen Sie, Ihren Text in einer Ansicht (mit einem transparenten Hintergrund) zu verpacken und in das Bild einzufügen.

<View style={itemStyle.content}> 
    <Image 
     source={{uri: someUri}} 
     style={imageStyle.content}> 
     <View> 
     <Text 
      style={textIndexStyle.content}> 
      {this.props.element["indexNumber"] + 1} 
     </Text> 
     </View> 
    </Image> 
</View>