如何在本机反应中将文本放置在图像上?

Posted

技术标签:

【中文标题】如何在本机反应中将文本放置在图像上?【英文标题】:How to place a text over image in react native? 【发布时间】:2018-08-21 08:20:48 【问题描述】:

如何在 React Native 中将文本垂直放置在图像上? I found this doc。但我不能那样做,我不能将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'
    ,
);

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

【问题讨论】:

【参考方案1】:

你必须在“css”中使用 position:'absolute' 然后使用 css 属性(如顶部、底部、右侧、左侧)放置文本


React Native absolute positioning horizontal centre

将您想要居中的子项包裹在 View 中,并使 View 成为绝对视图。

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

【讨论】:

【参考方案2】:

它与普通的 html 和 CSS 非常相似,将文本放置在图像上。您必须通过使文本成为绝对来将文本放在图像上。

按原样修改了这些代码:

userStyle:
    position : absolute;
    bottom : 0,
    top : 50,
    left : 0,
    right : 0,
    alignItems: 'center',
    justifyContent:'center',

我希望这些代码能解决您的问题。

【讨论】:

问题是关于 react native【参考方案3】:

我有自己的组件可以这样做:

import React from 'react';
import  View, Image  from 'react-native';

const BackgroundImage = (props) => 

  const  container, image  = styles;


  return (

    <View style=container>
      <Image
      style=[image, 
         resizeMode: props.resizeMode,    
        opacity: props.opacity
      ]  
      source=props.source***strong text***
      />
    </View>

  )
;

const styles = 
  container: 
    position: 'absolute',
    top: 0,
    left: 0,   
    width: '100%',
    height: '100%',
  ,
  image:   
    flex: 1,  
  
;

export BackgroundImage;

该组件将使用您想要的任何图像填充您的容器;)

import React from 'react';
import  View, Image  from 'react-native';

class List extends Component 
   render() 
    let source = uri: 'http://via.placeholder.com/350x150';
    return (
           <View style = backgroundColor: 'black'>
              <BackgroundImage
               resizeMode="cover"
               opacity=0.6
               source=source
               />
               <Text>Hello World</Text>
            </View>
     )
   
   export default List;

【讨论】:

【参考方案4】:

使用这个:

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

【讨论】:

这是更方便的实现方式。【参考方案5】:

您可以从react-native 导入ImageBackground 而不是Image,并将文本作为子项传递给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

【讨论】:

以上是关于如何在本机反应中将文本放置在图像上?的主要内容,如果未能解决你的问题,请参考以下文章

在本机反应中将图像转换为base64

如何在本机反应中将捕获的图像保存到应用程序文件夹?

如何在本机反应中在图像周围浮动文本

如何在本机反应中将图像宽度设置为 100% 并将高度设置为自动?

如何在本机反应中将图像读取为二进制/ blob

如何在本机反应中将 <Text> 文本设置为大写