Как разместить текст поверх изображения в React Native?
Как вертикально разместить текст поверх изображения в React Native? Я нашел этот документ. Но я не могу этого сделать, я не могу добавить тег 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'
},
});
Как разместить текст по центру изображения? Получилось примерно так 
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы должны использовать в "css"
position:'absolute'
А затем разместите свой текст, используя свойства css (например, сверху, снизу, справа, слева)
React Native абсолютное позиционирование по горизонтали по центру
Оберните ребенка, которого вы хотите центрировать, в View и сделайте View абсолютным.
<View style = {{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
<Text>Centered text</Text>
</View>
Это так похоже на то, что обычный HTML и CSS помещают текст поверх изображения. Вы должны поместить текст поверх изображения, сделав текст абсолютным.
изменил этот код как есть:
userStyle:{ position : absolute; bottom : 0, top : 50, left : 0, right : 0, alignItems: 'center', justifyContent:'center', }
Надеюсь, этот код решит вашу проблему.
Для этого у меня есть собственный компонент:
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;
использовать это:
<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>
Это более удобный способ добиться этого.
Вы можете импортировать 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.
вопрос в том, чтобы реагировать на родных