用React Native Image组件显示图片

前端小工
1,721 阅读6分钟

在一个由产品的美学价值所支配的时代，图像对于传达你的产品的独特性和独特性至关重要。图像有助于传达我们所建造的产品的想法、解决方案和身份。

作为开发者，我们必须有最好的工具来实现这些品质--而这正是React NativeImage 组件赋予我们的功能。在这篇文章中，我们将深入了解React NativeImage 组件的基础知识，讨论可用的类型和道具，并涵盖其限制和替代方案。

图片类型

在我们深入了解图像组件的细节之前，让我们回顾一下我们在移动应用中的各种图像类型，特别是React NativeImage 组件期望的图像类型。

  • 本地图片：用户设备上可用的图片，可以临时使用，也可以在相机卷中找到
  • 网络图片：通过网络传递的图片，如从谷歌找到并加载的图片
  • 静态资源：设备上可用的资源，这些资源总是相同的--它们既不是动态加载的，也不会改变。

属性

React NativeImage 组件提供了一些属性，你可以根据你的团队的业务或技术需求来配置组件和显示图片。其中有相当多的属性，但我们现在将专注于基本的属性。

source

这是告诉组件你要加载的图像的主要属性。你可以在这里使用本地或远程文件，基本上，只要传递图像的URI就可以加载它。如果你需要指定图像的宽度和高度尺寸，你也可以通过它传递多个URI，让设备选择最佳的一个来使用。

source 也会接受一个缓存属性，告诉组件如何缓存网络图片，但这只适用于iOS。

defaultSource

当你的组件期望加载一个网络图像时，这个道具是有用的。可以指定一个默认图像，它将加载到网络图像可用为止。

resizeMode

这个道具控制当图片的尺寸不适合框架的大小时如何调整。可用的值是。

  • cover ：缩放图像的宽度和高度，使其等于或大于视图的尺寸
  • contain ：与封面属性相反，contain 缩放图像的宽度和高度，使其等于或小于视图的大小。
  • stretch: 缩放的宽度和高度相互独立
  • repeat ：重复图像以覆盖视图，直到它被填满。
  • center ：沿两个维度将图像置于视图的中心位置
  • style ：用于图像组件的样式。

如果你有兴趣，你可以浏览React Native文档中的其他道具。

React Native中的背景图片

CSS通常是用来添加背景图片的语言，但React Native提供了一个ImageBackground 组件，使类似的功能在Web应用程序中可用。ImageBackground 组件也接受与Image 组件所接受的相同的道具。

使用React Native图像组件

现在我们已经摆脱了理论的束缚，让我们用一个演示来弄脏我们的手。为了开始，你要使用这个React Native环境设置。在本教程中，我是按照Expo的安装和设置说明进行的。

如果你想跟着学，你可以克隆这个仓库并签出到startup 分支。最终的代码在main 分支中。

首先，让我们给应用程序添加一个背景图片。对于这个演示，我在src/assets 目录中添加了一个名为 "static-image "的图片。我们将用它来演示React Native如何加载静态图片。

打开App.js ，添加以下代码。

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, ImageBackground } from "react-native";

const staticImage = require("./src/assets/static-image.png");
export default function App() {
 return (
   <View style={styles.container}>
     <ImageBackground source={staticImage} style={styles.ImageBackground}>
       <StatusBar style="auto" />
       {/* TODO: something goes here  */}
     </ImageBackground>
   </View>
 );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: "#fff",
   alignItems: "center",
   justifyContent: "center",
 },
 ImageBackground: {
   flex: 1,
   resizeMode: "cover",
   width: "100%",
   alignItems: "center",
 },

});

正如你所看到的，我们导入了ImageComponent ，然后将静态图像的位置存储在一个名为 staticImage**.**CommonJS语法用于告诉metro 服务器何时在应用程序包中加载图像。require 语句告诉metro 服务器将图像包含在捆绑包中。

然后我们将所有的子组件包裹在ImageBackground 组件中并指定样式。为了确保我们的风格能够转换，图片应该覆盖整个视图--在我们写 "100%宽度 "的地方指定--并且所有的子组件都应该对齐并居中排列。

接下来，在src 中导入images 文件中包含的image 数组。同时从React Native导入ScrollView 、Image和ActivityIndicator 组件。

在你的return 语句之前添加这个语句到你的App.js 函数，像这样。

const [loading, setLoading] = React.useState(false);

这是用来存储每个图片的加载状态的。我们稍后会用它来显示加载组件。

然后，用这段代码替换待办事项部分。

<ScrollView
         style={styles.ImageContainer}
         contentContainerStyle={{
           flexDirection: "row",
           flexWrap: "wrap",
           justifyContent: "center",
         }}
         horizontal={false}
       >
         {IMAGES.map((image, i) => {
           return (
             <View
               style={{
                 padding: 5,
               }}
               key={i}
             >
               <Image
                 source={{ uri: image }}
                 style={[
                   styles.Image,
                   {
                     width: i % 2 === 1 ? 150 : 95,
                     height: i % 2 === 1 ? 150 : 95,
                   },
                 ]}
                 resizeMode="center"
                 onLoadStart={() => setLoading(true)}
                 onLoadEnd={() => setLoading(false)}
               />
               {loading && <ActivityIndicator color="green" size="large" />}
             </View>
           );
         })}
       </ScrollView>

image 数组包含大量的图片，会超出屏幕的当前视口，所以我们将使用ScrollView 组件而不是普通的View ，以确保用户可以在视口内滚动到应用程序的其他部分。样式设计告诉ScrollView 组件包住所有的图片，使它们很好地堆叠在一起，并将图片显示在一排而不是默认的一列。

image 数组被循环使用，我将数组中包含的图像传递给uri ，该键可在source 道具中使用。我还应用不同的宽度和高度，这取决于图像的索引是奇数还是偶数。resizeMode 设置告诉图像组件沿视图中的两个维度将图像居中。

最后，我使用图像组件的onLoadStart 和onLoadEnd 道具来应用样式并获得图像的加载状态。

最后，我使用图像的加载状态来渲染一个ActivityIndicator ，这个组件将在图像加载时显示。

将这些样式添加到style 对象中。

ImageContainer: {
   marginHorizontal: 16,
   marginTop: 30,
   width: "100%",
 },
 Image: {
   shadowColor: "black",
   shadowOffset: {
     width: -10,
     height: 9,
   },
   shadowOpacity: 0.5,
   shadowRadius: 2,
   elevation:5
 },

然后，应用elevation 和shadow 样式，使图像具有水滴阴影的外观。仰角样式将在Android上使用，而阴影属性将被iOS使用。下面是我们的最终产品。

Final result of our React Native Image component demo

局限性

虽然React NativeImage 组件配备了一些惊人的功能，但在使用它时，你仍然会遇到一些限制。

渐进式图像加载

截至本文发布之时，React NativeImage 不支持渐进式图片加载功能。要实现这一点，你需要一个外部图像包或自己建立一个。

图片格式

Image 组件只支持以下图片格式。

  • PNG
  • JPG/JPEG
  • BMP
  • GIF
  • WEBP
  • PSD（仅限iOS）

如果你的项目需要发展到超过这些支持的格式，这将不是适合你的组件。

总结

我们已经了解了React NativeImage 组件的神奇功能，特别是它如何让我们与用户进行视觉交流。我们可以用这个组件实现很多东西--你甚至可以建立另一个高级图像组件来解决我们讨论过的一些限制!所以，年轻的学徒们，我让你们带着塑造银河系所需的一切来武装自己。

如果你被卡住了，有任何问题或更正，或者你只是想和我联系，请不要犹豫，在Twitter上联系我。愿力量与你们同在!

进一步阅读

The postDisplaying images with the React Native Image componentappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝