Javascript 如何在 React Native 中将文本放置在图像上？

How to place a text over image in react native?

提问by Linu Sherin

How to vertically place a text over image in react native? I found this doc. But i can't do like that , I can't add texttag as a child component of Imagetag.I've tried like the below.

如何在反应原生中垂直放置文本在图像上？我找到了这个文档。但我不能那样做，我不能将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'
    },
});

How to place the text to the center of image?Getting something like this

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

回答by Clad Clad

You have to use in the "css" position:'absolute'And then place your text using the css properties (like top, bottom, right, left)

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

---

---

React Native absolute positioning horizontal centre

React Native 绝对定位水平中心

Wrap the child you want centered in a View and make the View absolute.

将您想要的孩子包裹在一个视图中，并使视图成为绝对视图。

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

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

回答by jaideep rawat

use this:

用这个：

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

回答by Klaudia Brysiewicz

I have my own component to do so:

我有自己的组件来这样做：

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

that component will fill your container with any image you wish ;)

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

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;

回答by METALHEAD

You can import ImageBackgroundinstead of Imagefrom react-nativeand pass the text as children to the ImageBackground. This does the magic. Please see the code below:

您可以导入ImageBackground而不是Imagefromreact-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",
    }
})

We can use positioning too as stated by many, but I prefer using ImageBackground.

正如许多人所说，我们也可以使用定位，但我更喜欢使用ImageBackground.

回答by Nazmul Islam Tanvir

Its so similar like normal HTML and CSS place a text over image. You have to place a text over image by making text's absolute.

它与普通的 HTML 和 CSS 非常相似，将文本放在图像上。您必须通过使文本绝对化来将文本放在图像上。

• modified those code as it is :

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

• 修改了这些代码：

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

I hope those code will fix your problem.

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