如何在图片上方添加文字？答案

【问题标题】：How to add text above the image?如何在图片上方添加文字？
【发布时间】：2018-07-24 06:54:04
【问题描述】：

我使用react-native-swiper，我想在我的图片上方添加文字。

我尝试设置样式containerimageparagraph，还是不行。

样式设置应该怎么做？

任何帮助将不胜感激。提前致谢。

import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';

const dimensions = Dimensions.get('window').width;

class About extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Swiper
          style={styles.wrapper}
          height={200}
          paginationStyle={{bottom: 10}}
        >
          <View style={styles.container}>
            <Image style={styles.image} source={require('../img/home_service_bg1.jpg')} />
            <Text style={styles.paragraph}>How to let me show above the img.</Text>
          </View>
          <View style={{ flex: 1 }}>
            <Image source={require('../img/home_service_bg2.jpg')} style={styles.img}/>
          </View>
        </Swiper>

        <View style={{ flex: 2 }}>
          <Text>Hi</Text>
        </View>
      </View>   
    );
  }
}

const styles = {
  wrapper: {
  },
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  image: {
    flexGrow:1,
    height:null,
    width:null,
    alignItems: 'center',
    justifyContent:'center',
  },
  paragraph: {
    textAlign: 'center',
  },
};

export default About;

这是我现在的情况：

我希望它变成这样：

【问题讨论】：

标签： react-native react-native-swiper

【解决方案1】：

position="absolute" 将使它像 Android RelativeLayout 一样工作。

如果你想在顶部设置视图marginTop to 0。

看到您的要求后。你可以简单地使用ImageBackground

  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>

见facebook docs

【讨论】：

感谢您的建议，但是当我在container 或image 或paragraph 样式中添加position="absolute" 时，我的图像将消失在屏幕上。
我没有得到你，你能发布一个最终的 UI 图像，你想要实现。
好的，我在我的问题中上传了两张图片，请看一下~
非常感谢，它的工作。我现在知道如何实现它了。