React Native中可替代flutter_screenutil的同类工具包有哪些？

当然有，React Native生态里有不少和flutter_screenutil功能类似的屏幕适配工具，核心都是帮你基于设计稿实现多设备的UI一致性，下面是几个常用的：

• react-native-size-matters
  这个工具的设计思路和flutter_screenutil最接近，支持基于设计稿的宽高基准进行等比缩放，还提供了适度缩放的方法避免极端设备上的UI变形。
  用法示例：

  // 初始化（通常在入口文件设置设计稿尺寸，比如375x812）
  import { Dimensions } from 'react-native';
  import { init } from 'react-native-size-matters';
  
  const { width, height } = Dimensions.get('window');
  init(width, height);
  
  // 使用时
  import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
  
  const styles = StyleSheet.create({
    container: {
      width: scale(100), // 对应设计稿上100px的宽度
      height: verticalScale(50), // 对应设计稿上50px的高度
      fontSize: moderateScale(16), // 适度缩放字体，避免过小或过大
    },
  });
  

• react-native-responsive-screen
  主打百分比适配，你可以直接将设计稿的尺寸转换为屏幕百分比，也可以设置设计稿基准来计算精确的适配值，适合快速实现响应式布局。
  用法示例：

  import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
  
  const styles = StyleSheet.create({
    container: {
      width: wp('26.67%'), // 设计稿100px / 375px 宽 = 26.67%
      height: hp('6.16%'), // 设计稿50px / 812px 高 = 6.16%
      fontSize: hp('1.97%'),
    },
  });
  

• react-native-normalize
  轻量级的适配工具，自动根据设备屏幕尺寸调整传入的数值，无需额外初始化，适合简单场景的快速适配。
  用法示例：

  import normalize from 'react-native-normalize';
  
  const styles = StyleSheet.create({
    container: {
      width: normalize(100),
      height: normalize(50),
      fontSize: normalize(16),
    },
  });
  

这些工具都能实现和flutter_screenutil类似的屏幕适配效果，你可以根据项目需求和个人习惯选择，其中react-native-size-matters的API设计和使用体验最贴近你熟悉的flutter_screenutil。

内容的提问来源于stack exchange，提问作者Dave