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

宽度适配

• 通过 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;

方案解释

• Dimensions.get(‘window’)：用于获取当前设备的屏幕尺寸，返回屏幕宽度 (width) 和高度 (height)
• scale：是屏幕宽度和设计稿宽度（例如 750px）的比例，通过这个比例来调整 UI 元素的尺寸。
• scaleSize(size)：将设计稿中的尺寸按比例进行缩放
• scaleFontSize(size)：将设计稿中的字体大小按比例进行缩放
• react-native-size-matters：提供了 scale() 和 moderateScale() 等方法来帮助你做适配

为什么这样做？

• 宽度适配：通过获取屏幕的实际宽度与设计稿宽度的比例，动态调整各个组件的宽度，从而确保应用在不同设备上显示一致
• 字体大小适配：字体的大小也根据设备的屏幕宽度进行适配，避免文字在小屏幕上过大或在大屏幕上过小