it-roy-ru.com

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

Как разместить текст поверх изображения в реагировать на родной? я нашел этот документ . Но я не могу так поступить, я не могу добавить тег 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'
    },
});

Как поместить текст в центр изображения? Как-то так image

3
anu

Вы должны использовать в «css» position:'absolute' И затем поместить свой текст, используя свойства css (например, top, bottom, right, left) 


Реагировать по абсолютному позиционированию горизонтального центра

Оберните ребенка, которого вы хотите центрировать в представлении и сделайте представление абсолютным.

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

13
Clad Clad

использовать этот:

<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>
8
jaideep rawat

У меня есть свой компонент для этого:

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;
1
Klaudia Brysiewicz

Это так похоже, как обычный HTML и CSS помещают текст поверх изображения. Вы должны поместить текст поверх изображения, сделав текст абсолютным. 

  • изменил этот код как есть:

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

Я надеюсь, что этот код решит вашу проблему. 

0
Nazmul Islam Tanvir