如何在本机反应中将文本放置在图像上?
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
。
【讨论】:
以上是关于如何在本机反应中将文本放置在图像上?的主要内容,如果未能解决你的问题,请参考以下文章