文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将文本置于图像之上？

问如何将文本置于图像之上？
EN

Stack Overflow用户

提问于 2018-03-13 07:00:41

回答 5查看 77.1K关注 0票数 29

如何将文本垂直放置在图像之上，以响应本机？我找到了这个医生。但是我不能这样做，我不能添加text标记作为Image标签的子组件，我尝试了如下所示。

 <Card>
    <CardSection>
            <View style={styles.container}>
              <Image source={require('../Images/4.jpg')} style={styles.imageStyl}  />
    <Text style={styles.userStyle}>       
            {this.props.cat.name}
             </Text>
             </View>
            </CardSection>
            </Card>
const styles= StyleSheet.create({

    container:{
         flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
    },
    imageStyl: {
    flexGrow:1,
    width:"100%",
    height:200,
    alignItems: 'center',
    justifyContent:'center',
  },
    userStyle:{
        fontSize:18,
        color:'black',
        fontWeight:'bold',
        textAlign: 'center'
    },
});

如何将文本放在图像的中心?得到这样的东西

jsx

javascript

image

react-native

回答 5

Stack Overflow用户

回答已采纳

发布于 2018-03-13 07:16:12

您必须在" css“position:'absolute'中使用，然后使用css属性(如上、下、右、左)放置文本。

反应自然绝对定位水平中心

将想要居中的子视图包装在视图中，并使视图成为绝对的。

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}> <Text>Centered text</Text> </View>

票数 48

Stack Overflow用户

发布于 2018-09-19 10:21:54

用这个：

<ImageBackground source={require('background image path')} style={{width: '100%', height: '100%'}}>
   <View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
     <Text>Centered text</Text>
   </View>
</ImageBackground>

票数 43

Stack Overflow用户

发布于 2020-03-29 10:13:13

您可以从ImageBackground导入Image而不是从react-native导入文本，并将文本作为子文档传递给ImageBackground。这样才有魔力。请参阅以下代码：

<View style={styles.imageWrapper}>
     <ImageBackground style={styles.theImage} source={{uri : item.imageUrl}}>
          <Text>Hey</Text>
     </ImageBackground>
</View>

const styles = StyleSheet.create({
    imageWrapper: {
        height: 200,
        width: 200,
        overflow : "hidden"
    },
    theImage: {
        width: "100%",
        height: "100%",
        resizeMode: "cover",
    }
})

我们也可以像很多人所说的那样使用定位，但我更喜欢使用ImageBackground。

票数 15

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49250047

复制

相似问题

问如何将文本置于图像之上？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将文本置于图像之上？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将文本置于图像之上？
EN