如何在 React Native 中将一个图像居中放置在另一个图像上 [英] How do I center one image over another in React Native
问题描述
我正在尝试制作一个带有面部图像和以 React Native 时钟为中心的指针的时钟组件.不允许嵌入其他图像.我找到了一些将文本置于图像中心的帖子,但找不到任何方法将图像置于图像中心.
I'm trying to make a clock component with a face image and a needle centered on the clock in React Native. does not allow embedding other Images. I found a few posts for centering text over images but cannot find any way do center Image over images.
我试图找到一种避免给出绝对位置的方法,以便可以动态调整组件的大小.
I'm trying to find a way that avoids giving absolute position so the component can be dynamically sized.
推荐答案
如果我理解正确,您想在另一张图片上显示一张图片.一个作为父图像,另一个作为子图像,不使用绝对位置.为此,您可以使用 react-native 提供的 ImageBackground 组件,并使用百分比值设置其高度和宽度.
If i understood correctly, you want to show one image over other image. With one as a Parent image and other as a child image without using absolute postion. For this you can use ImageBackground Component provided by react-native and by setting its height and width with percentage value.
示例如下:
父图片:Clock.png 是一个 ImageBackground 组件
Parent Image : Clock.png is an ImageBackground Component
子图像:Needle.png 是一个图像组件
Child Image : Needle.png is an Image Component
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>
)
}
}
这篇关于如何在 React Native 中将一个图像居中放置在另一个图像上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!