React Native - 图片

在本章中，我们将了解如何在 React Native 中处理图片。

添加图片

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

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

App.js

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

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

可以使用以下语法访问本地图片。

image_example.js

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

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

输出

屏幕密度

React Native 提供了一种使用 @2x、@3x 后缀为不同设备优化图片的方式。程序只加载特定屏幕密度需要的图片。

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

[email protected]
[email protected]

网络图片

使用网络图片时，需要 source 属性，而不是 require。建议为网络图片定义 width 和 height。

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

输出