React Native组件篇 — Image组件

import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    let pic = {
      uri: 'https://reactnative.dev/img/tiny_logo.png'
    };
    return (
      <View style={styles.container}>
        <Text>Hello, React Native!</Text>
        <Image source={pic} style={{width: 50, height: 50}} />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

这段代码展示了如何在React Native应用中导入并显示一个远程图片。首先，我们导入了必要的React Native组件。然后，我们创建了一个名为App的类组件，并在其render方法中定义了一个pic对象，它包含一个指向远程图片的URI。接下来，我们在<View>组件中渲染了一个<Text>元素和一个<Image>元素，<Image>元素使用了我们定义的pic对象作为其source属性，并通过style属性设置了图片的宽度和高度。最后，我们使用StyleSheet.create定义了一个简单的样式表，为应用程序的根视图指定了布局和样式。