Как поместить текст поверх изображения

Question

Так что я новичок в реагировании на нативную (и в целом JavaScript), я пытаюсь добиться этого:

Таким образом, в основном это изображение с текстом над ним, но слегка выходящее из верхней части изображения.

И вот что я получаю: что я получаю

Как видите, текст не отображается, когда он выходит за пределы изображения.

Это код, который я использую:

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>
    );
  }
}

И это 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',
  },
});

Как мне этого добиться?

Спасибо:)

Answer 1

Я думаю, почему вы не можете получить идеальный ответ, потому что текст находится в компоненте изображения. Поэтому, когда какая-то часть изображения не будет отображаться.

Мой метод - использовать свойство position. Вот простой пример, который я только что создал. https://rnplay.org/apps/rpv82A

И помните, что свойство z-index в Reaction-native зависит от порядка рендеринга. https://github.com/facebook/react-native/issues/698

Answer 2

Вы можете достичь этого, используя следующее свойство CSS:

position

Используя этот метод, вы просто будете использовать 3 элемента:div,imgа также 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
}

После того, как вы попробуете этот код, вы можете изменить значения в 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
}

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