当前位置：首页 > article >正文

react native 屏幕适配方案，设计图750px

article 2025/1/6 17:34:00

宽度适配

通过 Dimensions 获取屏幕的宽度，使用一个简单的比例来调整你的组件宽度。

字体大小适配

根据屏幕宽度或高度调整字体大小，确保字体在不同设备上显示一致。

步骤说明

获取屏幕宽度：使用 Dimensions API 获取屏幕宽度，通常我们根据设计稿的宽度（例如 750px）来计算比例，进行宽度和字体的缩放
使用比例缩放：根据设备的屏幕宽度与设计稿宽度的比例来动态计算字体和宽度。

示例代码

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

// 获取屏幕宽度
const { width } = Dimensions.get('window');

// 设计稿宽度（750px）
const guidelineBaseWidth = 750;

// 计算比例
const scale = width / guidelineBaseWidth;

// 简单的缩放函数
const scaleSize = (size) => size * scale;  // 用于宽度
const scaleFontSize = (size) => size * scale;  // 用于字体大小

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>适配后的字体大小</Text>
      <View style={styles.box}></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: scaleFontSize(30),  // 设计稿中的字体大小为30px
  },
  box: {
    width: scaleSize(300),  // 设计稿中的宽度为300px
    height: scaleSize(50),   // 设计稿中的高度为50px
    backgroundColor: 'skyblue',
  },
});

export default App;

方案二：使用 react-native-size-matters

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { scale, moderateScale } from 'react-native-size-matters';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>适配后的字体大小</Text>
      <View style={styles.box}></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: scale(30),  // 字体大小根据屏幕宽度自动调整
  },
  box: {
    width: scale(300),  // 宽度根据屏幕宽度自动调整
    height: moderateScale(50),  // 高度根据屏幕宽度适中调整
    backgroundColor: 'skyblue',
  },
});

export default App;