我正在尝试在React Native中制作带有面部图像和以时钟为中心的针的时钟组件。 不允许嵌入其他图像。 我找到了一些帖子,用于将文本居中放在图像上,但无法找到任何方法将图像居中放在图像上。
编辑: 我试图找到一种避免给出绝对位置的方法,这样组件就可以动态调整大小。
答案 0 :(得分:4)
如果我理解正确,您希望在其他图像上显示一张图像。使用一个作为父图像而另一个作为子图像而不使用绝对位置。 为此,您可以使用react-native提供的 ImageBackground 组件,并使用百分比值设置其高度和宽度。
以下是示例:
父图片:Clock.png是 ImageBackground 组件
子图片:Needle.png是图片组件
import React, { Component } from 'react'
import { StyleSheet, View, Text, ImageBackground, Image } from 'react-native'
export default class ImageView extends Component {
render() {
return (
<View
style={{
flex: 1
}}
>
<View
style={{
flex: 0.25,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red'
}}
>
<Text style={{ color: 'white', fontSize: 26 }}>I am Header</Text>
</View>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
// backgroundColor: 'blue',
borderWidth: 1,
borderColor: 'red'
}}
>
<ImageBackground
source={require('@assets/Clock.png')}
style={{
height: '60%',
width: '100%'
}}
resizeMode="contain"
>
<Image
style={{
marginTop: '4.5%',
alignSelf: 'center',
height: '30%',
width: '100%'
}}
resizeMode="contain"
source={require('@assets/Needle.png')}
/>
</ImageBackground>
</View>
</View>
)
}
}
答案 1 :(得分:0)
与常规旧的html,css。
中处理相同使用position:absolute
然后对齐项目,使其符合您的预期。