如何解决当屏幕尺寸不同时,我应该如何处理绝对位置?
我想在 react-native 中使用 imagebackground 在特定位置显示文本。
当使用resize mode as contains时,如何为不同的屏幕尺寸指定不同的绝对位置?
https://i.stack.imgur.com/HRUwn.png
<imagebackground
source={require("../../assets/image.png")}
style={{ width: "100%",height: "100%",position: "relative" }}
resizeMode="contain"
onLayout={(event) => this.setLayout(event.nativeEvent.layout)}
>
<Text
style={{
position: "absolute",left: 90,top: 300,}}
>
Text_1
</Text>
<Text
style={{
position: "absolute",left: 280,}}
>
Text_2
</Text>
</imagebackground>
解决方法
使用维度给出左右位置。示例如下,
import { Dimensions } from 'react-native';
const window = Dimensions.get('window');
<View style={{
flexdirection:'row',justifyContent:'space-between',marginLeft:(window.width)*0.3,marginRight:(window.width)*0.5,top:(window.height)*0.25,position: "absolute",}}>
<Text>Text One </Text>
<Text>Text Two </Text>
</View>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。