React Native - 图片

• 

  简述

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

  添加图像

  让我们创建一个新文件夹img在 - 的里面src文件夹。我们将添加我们的图像（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后缀。该app将仅加载特定屏幕密度所需的图像。

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

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

• 

  网络图像

  使用网络图像时，而不是require，我们需要source财产。建议定义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
  

  输出