推荐开源项目：React Native响应式布局库 - `react-native-responsive-dimensions`

import { Dimensions, Platform } from 'react-native';
import ResponsiveDimensions from 'react-native-responsive-dimensions';
 
// 设置设备的宽度和高度
ResponsiveDimensions.setDimensions(Dimensions.get('window'));
 
// 设置基准设备的宽度和高度（例如iPhone 6的分辨率）
ResponsiveDimensions.setBaseDimensions(667, 375);
 
// 使用响应式样式
const styles = {
  container: {
    width: ResponsiveDimensions.getWidth(100), // 相当于100%屏幕宽度
    height: ResponsiveDimensions.getHeight(50), // 相当于50%屏幕高度
    borderRadius: ResponsiveDimensions.getWidth(10) // 边框半径为10%宽度
  },
  text: {
    fontSize: ResponsiveDimensions.getFontSize(2), // 字体大小为基础字体大小的2倍
  }
};
 
// 在组件中使用样式
export default function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>响应式布局示例</Text>
    </View>
  );
}

这段代码演示了如何在React Native项目中使用react-native-responsive-dimensions库来创建响应式布局。首先，我们通过Dimensions.get('window')获取当前设备的宽度和高度，并将其设置为屏幕尺寸。然后，我们可以使用getWidth和getHeight方法来创建基于百分比的宽度和高度。此外，getFontSize方法可以用来获取响应式字体大小。这样，我们的组件就可以在不同尺寸的设备上提供一致的用户体验。