请稍等 ...

RN样式和web样式表现不一致

在RN中

import React from "react";
import { View, StyleSheet } from "react-native";

const styles = StyleSheet.create({
    root: {
        height: '100%',
        backgroundColor: 'pink',
        marginTop: 50
    },
    subView: {
        width: '30%',
        height: 100,
        backgroundColor: 'skyblue',
        position: 'absolute',
        left:10,
        top:0

    }
})

export default () => {
    return (
        <View style={styles.root}>
            <View style={styles.subView} />
        </View>
    );
}

图片描述

在web中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,body {
        height: 100%;
    }
    .root {
        height: 100%;
        background-color: pink;
        margin-top: 50px;
    }

    .subView {
        width: 30%;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        left: 10px;
        top:0;
    }
</style>
<body>
    <div class="root">
        <div class="subView"></div>
    </div>
</body>
</html>

图片描述

在浏览器中，绝对定位下 top: 0 是紧贴浏览器视口最上边的
在RN中，绝对定位下top: 0是贴紧父元素最上边的
很疑惑，请老师解答一下，万分感激

Panda_io 2023-06-17 01:03:05

源自：7-2 View：ui构建的基石，一切页面的起点

328

收起

提交取消

1回答

FE大公爵回答被采纳获得+3积分 2023-06-17 11:29:49

在web中，给root加上position:relative

0 回复有任何疑惑可以回复我~

收起回答

提问者 Panda_io #1

那老师在RN中view标签自带相对定位属性吗？我想搞清楚本质，我其实知道加relative可以解决这个问题，它是最近的非static祖先元素，就以它来定位，默认就是视口，但RN又无法像chrome一样进行样式查看，所以不明白view标签自带的属性

回复有任何疑惑可以回复我~ 2023-06-17 11:41:39

FE大公爵回复提问者 Panda_io #2
```
你说对了，rn中自带relative
```
回复有任何疑惑可以回复我~ 2023-06-17 12:36:57
提问者 Panda_io 回复 FE大公爵 #3
```
好的明白了谢谢老师
```
回复有任何疑惑可以回复我~ 2023-06-17 22:48:04