React Native - 图片

React Native - 图片 首页 / React Native入门教程 / React Native - 图片

图像组件用于在屏幕上显示图像。可以从不同的源加载图片,例如静态资源,临时本地文件,本地磁盘,网络图片等。

静态图片

通过将静态图像放置在源代码目录中的某个位置来在应用程序中添加静态图像,并提供以下路径:

<Image source={require('./icon_name.png')} />

在以上语法中,打包程序将在与需要它的组件相同的文件夹中查找icon_name.png。要将图像加载到特定平台上,应通过将平台指定为扩展名来命名,例如icon_name.ios.png和icon_name.android.png。

Asset图片

通过使用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'}} />

URI图片

编码的图像数据在图像组件中使用"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);

输出:

React Native Image

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

软件测试52讲 -〔茹炳晟〕

乔新亮的CTO成长复盘 -〔乔新亮〕

全链路压测实战30讲 -〔高楼〕

深入C语言和程序运行原理 -〔于航〕

李智慧 · 高并发架构实战课 -〔李智慧〕

深入浅出可观测性 -〔翁一磊〕

JavaScript进阶实战课 -〔石川〕

高并发系统实战课 -〔徐长龙〕

结构执行力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)