使用React Native响应式屏幕布局，让跨设备开发变得更简单！

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
 
const ResponsiveScreen = () => {
  return (
    <View style={styles.container}>
      <Image style={styles.logo} source={require('./logo.png')} />
      <Text style={styles.title}>欢迎来到我的应用</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 100,
    height: 100,
    marginBottom: 20,
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
  },
});
 
export default ResponsiveScreen;

这段代码展示了如何在React Native应用中使用flexbox布局创建一个响应式屏幕。container样式使用了flex: 1来占满整个屏幕，并通过justifyContent和alignItems属性确保内容居中。logo样式使用了固定的宽高，并在图片下方留有20单位的边距。title样式通过textAlign属性使文本居中对齐。这样的布局能够确保不同尺寸和分辨率的设备都能够很好地展示界面。