关于react-native的适配与布局方式

最新推荐文章于 2025-07-04 10:05:30 发布

原创最新推荐文章于 2025-07-04 10:05:30 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #react-native

react-native 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用React Native进行布局的方法，通过利用屏幕宽度和高度以及relative相对定位，实现了一个具体的布局示例，并展示了如何根据不同屏幕尺寸进行适配。

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

个人比较倾向于利用屏幕宽度和高度以及relative相对距离来布局。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class Demo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.navigationBar}>
                </View>
                {/*距离顶部40px,一个宽600px，高200px居中的View*/}
                <View style={[styles.sizeView,{position:'relative'}]}>
                </View>
                {/*距离左侧20px,距离顶部80px,宽度400px,高度60px*/}
                <View style={[styles.bottomLeftView,{position:'relative'}]}>
                </View>
                {/*距离bottomLeftView右侧40px,距离顶部sizeView200px,宽度40px,高度200px*/}
                <View style={[styles.bottomRightView,{position:'relative'}]}>
                </View>
            </View>
        );
    }
}

let Dimensions = require('Dimensions');
let {width,height} = Dimensions.get('window');
let Platform = require('Platform');
let StatusBar = require('StatusBar');
{/*如果UI设计师的原型图是以6S为基准，6S的屏幕宽度为1334像素，那么算出缩放比例*/}
let scale = width/1334;
let navHeight = Platform.OS === 'ios' ? 128*scale : StatusBar.currentHeight + 40*scale;


const styles = StyleSheet.create({
    container: {
        backgroundColor: 'yellow',
        width: width,
        height: height,
    },
    navigationBar: {
        backgroundColor: 'red',
        width:width,
        height:navHeight,
    },
    sizeView: {
        backgroundColor: 'green',
        marginTop: 40*scale,
        left: (width - 600*scale)/2,
        width: 600*scale,
        height: 200*scale,
    },
    bottomLeftView: {
        backgroundColor: 'blue',
        marginTop:80*scale,
        left: 20*scale,
        width: 400*scale,
        height: 60*scale,
    },
    bottomRightView: {
        backgroundColor: 'black',
        left: 20*scale + 400*scale + 40*scale,
        marginTop:200*scale,
        width: 40*scale,
        height: 200*scale,
    }
});

AppRegistry.registerComponent('Demo', () => Demo);