react-native教程：使用position布局

在react-native中，除了使用flex布局方法之外，我们还有第二种选项：“绝对定位”。把“绝对定位”四个字加上引号，是因为它并不像html里面那样，后面我们会进行总结。

react-native中元素的position属性可以设置为两种值：relative和absolute。（不支持static和fixed）

relative定位方式是指元素相对于自己原始应该所在的位置进行偏移；absolute定位方式是指元素相当于该元素的父元素所在位置进行偏移（父元素不需要设为relative或absolute）。

我们通过10个布局demo进行学习：

标准布局, 如图中“No”所示。

为了对比效果，我们先定义一个标准的布局，不使用position布局。

getNormal() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View style={{width:30, height:30, backgroundColor:'green'}}>
                <Text>No</Text>
            </View>
        </View>
    );
}

relative布局1, 如图中“R1”所示。

relative布局表示, 把元素从原始位置, 移动一定的距离, 定位到新位置
left: -10 表示, 元素原始位置的左边缘坐标, 加-10等于移动后元素的左边缘坐标
top: -10 表示, 元素原始位置的上边缘坐标, 加-10等于移动后元素的上边缘坐标

getRelative1() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View style={{width:30, height:30, backgroundColor:'green', position:'relative', left:-10, top:-10}}>
                <Text>R1</Text>
            </View>
        </View>
    );
}

relative布局2, 如图中“R2”所示。

relative布局表示, 把元素从原始位置, 移动一定的距离, 定位到新位置
right: 10 表示, 元素原始位置的右边缘坐标, 减10等于移动后元素的右边缘坐标
bottom: 10 表示, 元素原始位置的下边缘坐标, 减10等于移动后元素的下边缘坐标

getRelative2() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View style={{width:30, height:30, backgroundColor:'green', position:'relative', right:10, bottom:10}}>
                <Text>R2</Text>
            </View>
        </View>
    );
}

relative布局3, 如图中“R3”所示。

relative布局表示, 把元素从原始位置, 移动一定的距离, 定位到新位置
left: 20 表示, 元素原始位置的左边缘坐标, 加20等于移动后元素的左边缘坐标
top: 20 表示, 元素原始位置的上边缘坐标, 加20等于移动后元素的上边缘坐标

getRelative3() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View style={{width:30, height:30, backgroundColor:'green', position:'relative', left:20, top:20}}>
                <Text>R3</Text>
            </View>
        </View>
    );
}

relative布局4, 如图中“R4”所示。

relative布局表示, 把元素从原始位置, 移动一定的距离, 定位到新位置
right: -20 表示, 元素原始位置的右边缘坐标, 减-20等于移动后元素的右边缘坐标
bottom: -20 表示, 元素原始位置的下边缘坐标, 减-20等于移动后元素的下边缘坐标

getRelative4() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View
                style={{width:30, height:30, backgroundColor:'green', position:'relative', right:-20, bottom:-20}}>
                <Text>R4</Text>
            </View>
        </View>
    );
}

relative布局5, 如图中“R5”所示。

relative布局表示, 把元素从原始位置, 移动一定的距离, 定位到新位置
left: 5 表示, 元素原始位置的左边缘坐标, 加5等于移动后元素的左边缘坐标
top: 5 表示, 元素原始位置的上边缘坐标, 加5等于移动后元素的上边缘坐标
right: 5 表示, 元素原始位置的右边缘坐标, 减5等于移动后元素的右边缘坐标
bottom: 5 表示, 元素原始位置的下边缘坐标, 减5等于移动后元素的下边缘坐标
实验发现: 使用relative布局, 无法通过left, top, right, bottom四个布局属性自动产生宽高

getRelative5() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View
                style={{backgroundColor:'green', position:'relative', left:5, top:5, right:5, bottom:5}}>
                <Text>R5</Text>
            </View>
        </View>
    );
}

relative布局6, 如图中“R6”所示。

relative布局表示, 把元素从原始位置, 移动一定的距离, 定位到新位置
left: 10 表示, 元素原始位置的左边缘坐标, 加10等于移动后元素的左边缘坐标
top: 10 表示, 元素原始位置的上边缘坐标, 加10等于移动后元素的上边缘坐标
right: 10 表示, 元素原始位置的右边缘坐标, 减10等于移动后元素的右边缘坐标
bottom: 10 表示, 元素原始位置的下边缘坐标, 减10等于移动后元素的下边缘坐标
实验发现: left, top, right, bottom, width, height这6个布局属性都存在的情况下, 以left, top, width, height这四个属性为准, 忽略了right和bottom属性

getRelative6() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View
                style={{width:30, height:30, backgroundColor:'green', position:'relative', left:10, top:10, right:10, bottom:10}}>
                <Text>R6</Text>
            </View>
        </View>
    );
}

absolute布局1, 如图中“A1”所示。

absolute布局表示, 把内层元素从其父元素所在位置, 移动一定的距离, 定位到新位置
left: -10 表示, 其父元素所在位置的左边缘坐标, 加-10等于移动后元素的左边缘坐标
top: -10 表示, 其父元素所在位置的上边缘坐标, 加-10等于移动后元素的上边缘坐标

getAbsolute1() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View style={{width:30, height:30, backgroundColor:'green', position:'absolute', left:-10, top:-10}}>
                <Text>A1</Text>
            </View>
        </View>
    );
}

absolute布局2, 如图中“A2”所示。

absolute布局表示, 把内层元素从其父元素所在位置, 移动一定的距离, 定位到新位置
right: 10 表示, 其父元素所在位置的右边缘坐标, 减10等于移动后元素的右边缘坐标
bottom: 10 表示, 其父元素所在位置的底边缘坐标, 减10等于移动后元素的底边缘坐标

getAbsolute2() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View style={{width:30, height:30, backgroundColor:'green', position:'absolute', right:10, bottom:10}}>
                <Text>A2</Text>
            </View>
        </View>
    );
}

absolute布局3, 如图中“A3”所示。

absolute布局表示, 把内层元素从其父元素所在位置, 移动一定的距离, 定位到新位置
left: 5 表示, 其父元素所在位置的左边缘坐标, 加5等于移动后元素的左边缘坐标
top: 5 表示, 其父元素所在位置的上边缘坐标, 加5等于移动后元素的上边缘坐标
right: 5 表示, 其父元素所在位置的右边缘坐标, 减5等于移动后元素的右边缘坐标
bottom: 5 表示, 其父元素所在位置的底边缘坐标, 减5等于移动后元素的底边缘坐标
实验发现: 使用absolute布局, 可以通过left, top, right, bottom四个布局属性自动产生宽高

getAbsolute3() {
    return (
        <View style={{marginLeft:30, marginTop:30, width:60, height:60, backgroundColor:'blue'}}>
            <View
                style={{backgroundColor:'green', position:'absolute', left:5, top:5, right:5, bottom:5}}>
                <Text>A3</Text>
            </View>
        </View>
    );
}

最后，我们把render函数的代码贴出来，大家可以亲自动手试试效果。

render() {
    // 根视图
    return (
        <View style={{flex:1, flexDirection:'row', flexWrap:'wrap', paddingTop:20, backgroundColor:'#f5fcff'}}>
            {this.getNormal()}

            {this.getRelative1()}
            {this.getRelative2()}
            {this.getRelative3()}
            {this.getRelative4()}
            {this.getRelative5()}
            {this.getRelative6()}

            {this.getAbsolute1()}
            {this.getAbsolute2()}
            {this.getAbsolute3()}
        </View>
    );
}

总结

• 如果要使用relative布局手段，尽量使用left和top来定位，避免使用right和bottom。
• 如果要使用absolute布局，子元素的位置是相对于其容器元素位置的，而不是相对于手机屏幕的左上角。且不需要设置容器元素的position属性。
• 使用absolute布局, 可以通过left, top, right, bottom四个布局属性自动为元素计算产生宽度和高度，但relative布局则不支持这样。