React Native中的 position 定位及示例relative/absolute

最新推荐文章于 2021-12-03 15:31:34 发布

Mars-xq

最新推荐文章于 2021-12-03 15:31:34 发布

阅读量4.7k

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/sinat_31057219/article/details/108029821

版权

react 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析ReactNative中的定位策略，包括flexbox与position定位的结合使用，详细阐述relative与absolute定位的区别及应用实例，帮助开发者掌握精准布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：

React Native中的postion定位

一、概述

在React Native中，flexbox定位和position定位可以同时使用，
同时生效（关于flexbox定位的相关知识请自行查阅资料，这里不再赘述）。

position有两个取值：relative（默认值）和absolute。

二、relative——相对定位

以元素本来的位置为基准进行偏移。

示例：

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
} from 'react-native';

export default class Test extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.p1}/>
                <View style={styles.p2}/>
                <View style={styles.p3}/>
                <View style={styles.p4}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        backgroundColor: '#33ffff',
    },
    p1: {
        width: 50,
        height: 50,
        backgroundColor: 'red',
    },
    p2: {
        width: 50,
        height: 50,
        backgroundColor: 'yellow',
    },
    p3: {
        width: 50,
        height: 50,
        backgroundColor: 'blue',
    },
    p4: {
        width: 50,
        height: 50,
        backgroundColor: '#666',
        position: 'relative',
        left: 50,
        top: 50,
    },
});

在这里插入图片描述

灰色方块本来的位置应该是靠在蓝色方块的下方并与蓝色方块左右对齐，
通过position: ‘relative’,left: 50,top: 50使得灰色方块以其本来的位置为基准，
向右、向下分别偏移了50个单位，效果如上图所示。

三、absolute——绝对定位

以父元素的边框为基准进行偏移。

示例：

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
} from 'react-native';

export default class Test extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.p1}/>
                <View style={styles.p2}/>
                <View style={styles.p3}/>
                <View style={styles.p4}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#33ffff',
    },
    p1: {
        width: 50,
        height: 50,
        backgroundColor: 'red',
        position: 'absolute',
        left: 50,
        top: 50,
    },
    p2: {
        width: 50,
        height: 50,
        backgroundColor: 'yellow',
        position: 'absolute',
        right: 50,
        bottom: 50,
    },
    p3: {
        width: 50,
        height: 50,
        backgroundColor: 'blue',
        position: 'absolute',
        bottom: 50,
    },
    p4: {
        width: 50,
        height: 50,
        backgroundColor: '#666',
        position: 'absolute',
        bottom: 50,
        alignSelf: 'center',
    },
});