React Native 图片组件基础知识

import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
 
export default class PhotoScreen extends React.Component {
  render() {
    let photo = this.props.navigation.getParam('photo');
 
    return (
      <View style={styles.container}>
        <Image style={styles.photo} source={{ uri: photo.imageURL }} />
        <Text style={styles.text}>{photo.caption}</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#2c3e50',
    alignItems: 'center',
    justifyContent: 'center',
  },
  photo: {
    width: 300,
    height: 300,
    marginBottom: 10,
  },
  text: {
    color: 'white',
    fontSize: 20,
  }
});

这段代码展示了如何在React Native应用中导入并展示一张图片，同时使用了React Native的导航参数来接收图片信息。图片的URL通过source属性传递给Image组件，而图片的标题通过Text组件显示。通过StyleSheet，我们定义了图片和文本的样式，包括尺寸、颜色和字体等。