图像组件用于在屏幕上显示图像。可以从不同的源加载图片,例如静态资源,临时本地文件,本地磁盘,网络图片等。
通过将静态图像放置在源代码目录中的某个位置来在应用程序中添加静态图像,并提供以下路径:
<Image source={require('./icon_name.png')} />
在以上语法中,打包程序将在与需要它的组件相同的文件夹中查找icon_name.png。要将图像加载到特定平台上,应通过将平台指定为扩展名来命名,例如icon_name.ios.png和icon_name.android.png。
通过使用React Native和平台代码构建的混合应用程序(UI)也可以使用捆绑到应用程序中的图像。
通过Xcode asset目录或Android drawable文件夹中包含的图像无需扩展即可使用。
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-image.html
来源:LearnFk无涯教程网
<Image source={{uri: 'icon_name'}} style={{width: 60, height: 60}} />
Android asset文件夹中的图像,请使用以下方案:具有图像扩展名的asset:/。
<Image source={{uri: 'asset:/icon_name.png'}} style={{width: 60, height: 60}} />
动态和网络图像也被显示在图像组件。访问网络图像,则需要手动指定图像的尺寸。
建议使用https为了满足对iOS版应用传输安全要求。
// GOOD <Image source={{uri: 'https://url_of_image.png'}} style={{width: 60, height: 60}} /> // BAD <Image source={{uri: 'https://url_of_image.png'}} />
编码的图像数据在图像组件中使用"data:" uri方案。数据图像还需要指定图像的尺寸。
<Image style={{width: 66, height: 66}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}} />
使用ImageBackground组件设置背景图像。它也是与Image相同的道具。我们可以将任何组件作为子组件添加到其顶部。
return ( <ImageBackground source={...} style={{width: '100%', height: '100%'}}> <Text>Inside</Text> </ImageBackground> );
App.js
import React, { Component } from 'react'; import {StyleSheet, AppRegistry,Text, View, Image,ImageBackground } from 'react-native'; export default class DisplayAnImage extends Component { render() { return ( <ImageBackground source = {{uri:'https://www.learnfk.com/tutorial/react-native/images/react-native-tutorial.png'}} style={{width: '100%', height: '100%'}}> <Image source={require('./favicon.png')} /> <Image source={require('/ReactNative/MyReactNativeApp/img/favicon.png')} /> <Image source={require('MyReactNativeApp/img/favicon.png')} /> <Image source={{uri: 'asset:/images/favicon.png'}} style={{width: 60, height: 60}} /> <Image source = {{uri:'https://www.learnfk.com/images/logo/jtp_logo.png'}} style = {{ width: '80%', height: 70 }} /> <Image style={{width: 60, height: 60}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}} /> </ImageBackground> ); } } // 如果使用 Create React Native App,请跳过此行 AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)