报告:目前完成度【 0.5/3 】,预计上线时间:【 未知 】 【问卷调查】
英文链接源链接 [6859]
contenteditable="true"

React Native - Images 介绍

在本章中,我们将了解如何在React Native中使用图像。

新增图片

让我们在 src 文件夹内创建一个新文件夹 img 。我们将在该文件夹中添加图像( myImage.png )。

我们将在主屏幕上显示图像。

App.js

import React from 'react';
import ImagesExample from './ImagesExample.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

可以使用以下语法访问本Map像。

image_example.js

import React, { Component } from 'react'
import { Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {require('C:/Users/Learnfk/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample

输出

React Native Images

屏幕密度

React Native提供了一种使用后缀 @2x,@3x 为不同设备优化图像的方法。该应用程序将仅加载特定屏幕密度所需的图像。

以下是 img 文件夹中图像的名称。

my-image@2x.jpg
my-image@3x.jpg

网络影像

使用网络镜像时,我们需要 source 属性而不是 require 。建议为网络镜像定义宽度和高度。

App.js

import React from 'react';
import ImagesExample from './image_example.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

image_example.js

import React, { Component } from 'react'
import { View, Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
   style = {{ width: 200, height: 200 }}
   />
)
export default ImagesExample

输出

网络影像
点我分享笔记