如何将文字放在图像上

Question

So I'm new to react-native (and javascript in general), I'm trying to achieve this:

So basically this is an image with text over it but slightly going out of the image top.

And this is what I get : What I get

As you can see the text is not rendered when it is out of the image.

This is the code I use :

class Test extends Component {
  render () {
    return (
      <View style={styles.matchContainer}>
        <Image source={ require('../../res/img/lol_wallpaper.jpg') } style={styles.backgroundImage}>
          <View style={styles.topContainer}>
            <Text style={styles.topText}>text</Text>
            <Text style={styles.topText}>text</Text>
          </View>
        </Image>
      </View>
    );
  }
}

And this is the css :

var styles = StyleSheet.create({
  matchContainer: {
    flexDirection: 'column',
    justifyContent: 'flex-start',
    width: width,
    height: 300,
    marginTop: 30,
    backgroundColor: '#FFFFFF',
  },
topText: {
    color: 'white',
    fontWeight: 'bold',
    backgroundColor: 'rgb(86, 203, 83)',

    padding: 2,
    position: 'relative',
  },
topContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: 5,
    marginRight: 5,
    marginBottom: 5,

    top: -10,
    position: 'relative',
  },
  backgroundImage: {
    width: width - 10,
    height: 138,
    marginLeft: 5,
    marginTop: 10,
    position: 'absolute',
  },
});

How can I achieve this ?

Thanks :)

Answer 1

I guess why you can't get your ideal answer because the Text is in the Image component. So when some part is out of the Image wouldn't display.

My method is use the property position . There is the simple example I just created. https://rnplay.org/apps/rpv82A

And remember the property z-index in react-native is depending on the render order. https://github.com/facebook/react-native/issues/698

Answer 2

You can achieve this by using the following CSS property:

position

By using this method, you'll just use 3 elements: div , img and h2

HTML

<div class="img-box">
    <img src="http://science-all.com/images/wallpapers/league-of-legends-wallpaper/league-of-legends-wallpaper-20.jpg" />
    <h2>TEXT</h2>
</div>

CSS

.img-box {
margin-top: 50px;
width: 450px;
height: 200px;
position: relative;
}

.img-box img {
    width: 100%;
    height: auto;
}

.img-box h2 {
    width: 125px;
    height: 40px;
    position: absolute;
    top: -25%;
    left: 5%;
    font-size: 28pt;
    text-align: center;
    background-color: limegreen
}

After you try out this code, you can change the values in the CSS to follow your needs, since you respect this structure.

 .img-box { margin-top: 50px; width: 450px; height: 200px; position: relative; } .img-box img { width: 100%; height: auto; } .img-box h2 { width: 125px; height: 40px; position: absolute; top: -25%; left: 5%; font-size: 28pt; text-align: center; background-color: limegreen } 

 <div class="img-box"> <img src="http://science-all.com/images/wallpapers/league-of-legends-wallpaper/league-of-legends-wallpaper-20.jpg" /> <h2>TEXT</h2> </div>