使用React Native响应式布局(RNRL)，打造无缝跨屏应用体验

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
 
const App = () => {
  return (
    <View style={styles.container}>
      <Image source={{ uri: 'https://example.com/poster.jpg' }} style={styles.poster} />
      <View style={styles.details}>
        <Text style={styles.title}>电影标题</Text>
        <Text style={styles.rating}>9.5/10</Text>
        <Text style={styles.description}>
          一个关于某个主题的电影描述...
        </Text>
      </View>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 10
  },
  poster: {
    width: 150,
    height: 200,
    marginRight: 10
  },
  details: {
    flex: 1
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  rating: {
    fontSize: 16,
    color: '#009688'
  },
  description: {
    fontSize: 14,
    color: '#777',
    marginTop: 5
  }
});
 
export default App;

这段代码展示了如何使用React Native的基本组件来创建一个简单的电影海报组件，其中包含了一个海报图片和电影的详细信息。样式使用了flexbox布局来实现响应式设计，确保在不同尺寸的屏幕上都有良好的显示效果。