React Native-图片 - 芒果文档

📌 相关文章

📜 React Native-图片

📅 最后修改于: 2020-12-08 06:07:53 🧑 作者: Mango

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

新增图片

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

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

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

const App = () => {
   return (
      
   )
}
export default App

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

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

const ImagesExample = () => (
   
)
export default ImagesExample

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

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

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

使用网络映像时，我们需要source属性而不是require 。建议定义网络图像的宽度和高度。

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

const App = () => {
   return (
      
   )
}
export default App

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

const ImagesExample = () => (
   
)
export default ImagesExample