以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。
修改App.js,代码如下:
import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default class App extends React.Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( <View style={styles.container}> <Text>fashici!</Text> <Text>Shake your phone to open the developer menu.</Text> <Image source={pic} style={{width: 193, height: 110}} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'flex-start', justifyContent: 'center', }, });
效果如下: