了解React Native中的图像组件

图像是任何移动应用程序的重要方面。本教程将向您介绍图像组件，并向您展示如何在 react Native 应用程序中使用图像。您还将学习如何创建自己的照片库！

创建 React Native 应用程序的先决条件

我们将为此项目使用 Expo CLI。借助 Expo，开发人员可以创建 React Native 应用程序，而无需安装和配置软件依赖项（如 android Studio、Xcode 或开发和运行 React Native 应用程序所需的所有其他工具）所带来的所有挫败感。如果您想了解有关 Expo 的更多信息，请查看我们关于Expo 如何使 React Native 应用程序开发更容易的帖子。

如果你还没有 Expo CLI，首先确保你已经安装了node.js。然后在您的机器上全局安装 Expo CLI（命令行界面）：

npm install expo-cli --global

然后，使用expo命令初始化一个新项目。

expo init project_photos

如果需要在测试时使用图片，请将其添加到项目的assets文件夹中。

将图像添加到 React Native 应用程序

要在应用程序中添加图像，您首先需要Image从 react-native. React Native 图像组件允许您显示来自不同来源的图像，例如：

网络图像
静态资源
临时本地图像
本地磁盘映像，即来自相机胶卷

要导入 Image 组件，请将其添加到app.jsimport顶部的语句中，如下所示。

import { View, Text, Image, StyleSheet } from 'react-native'

显示静态图像

要显示静态图像，首先要添加项目的assets文件夹中的图像文件。通过提供图像路径来加载静态图像。显示静态图像的代码如下所示：

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image} from "react-native";
export default function App() {
  return (
    <View style={styles.container}>
        <StatusBar style="auto" />
        <Text>.........................</Text>
        <Image
          style={{ width: 100, height: 100, marginBottom: 15 }}
          source={require("./assets/facebook.png")}
        />
    </View>
  );
}

这是结果。

显示基于 Web 的图像或 URI 数据图像

显示来自网络或基于 Web 的源的图像类似于显示静态图像。在Image组件中，使用该source属性，并通过键设置图像在对象中的路径 uri，如下所示。

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image } from "react-native";
export default function App() {
  return (
    <View style={styles.container}>
        <StatusBar style="auto" />
        <Text>....................</Text>
        <Image
          style={{ width: 100, height: 100 }}
          source={{ uri: "https://reactjs.org/logo-og.png" }}
        />
    </View>
  );
}
您还需要使用 style属性添加图像的尺寸，就像在 html 中一样。这是两张图片的最终结果。

您还可以通过数据 URI 显示图像，在这种情况下，所有图像数据实际上都编码在 URI 中。这只建议用于非常小的或动态的图像。对于 URI 编码的图像，您将为图像数据提供source类似 source={{ uri:'data:image/png;base64,iVBOR...=='}}.

不要忘记，对于网络和 URI 编码的图像，您需要手动指定图像的尺寸。

背景图片

您还可以使用图像作为屏幕的背景。为此，请获取您选择的背景图像并将其添加到资产文件夹。接下来，从如下所示导入Imagebackground组件。react-native

import { StyleSheet, Text, View, Image, ImageBackground } from 'react-native';

该ImageBackground 组件包装并显示其中任何元素的背景。在这种情况下，我们将使用标签替换View标签ImageBackground并将其包裹在应用程序中的所有内容周围。

export default function App() {
  return (
      <ImageBackground
        source={require("./assets/back.jpeg")}
        style={styles.back_image}
      >
        <Text>.........................</Text>
        <StatusBar style="auto" />
        <Image
          style={{ width: 100, height: 100, marginBottom: 15 }}
          source={require("./assets/facebook.png")}
        />
        <Text>..............</Text>
        <Image
          style={{ width: 100, height: 100 }}
          source={{ uri: "https://reactjs.org/logo-og.png" }}
        />
      </ImageBackground>
  );
}

创建照片库

在本节中，我将向您展示如何在 FlatList. 该组件用于显示大量可滚动内容，可以水平或垂直滚动。

AFlatList使用renderItemprop 来呈现其输入数据中的每个项目。prop 是一个函数，它renderItem 从数据数组中获取一个项目并将其映射到一个 React 元素。数据中的每个项目都需要一个唯一的 id。这是默认情况下找到的，尽管您可以使用函数 propitem.key指定另一种查找或构建 id 的方法。keyExtractor

我们将使用useState附加到图像数组。钩子可以存储任何类型的useState值：数字、字符串、数组、对象等。将以下代码添加到app.js。

import React, { useState} from 'react'
export default function App() {
  const [images, setimages] = useState([
    require('./assets/image.jpg'),
    require('./assets/image1.jpg'),
    require('./assets/image2.jpg'),
    require('./assets/image3.jpg'),
    require('./assets/image4.jpg'),
    require('./assets/image5.jpg'),
    require('./assets/image6.jpg'),
    require('./assets/image7.jpg'),
    require('./assets/image8.jpg')
  ]);
  }

请注意，您需要将这些图像放在assets文件夹中。

接下来，我们将返回一个FlatList 呈现这些图像的：

return (
  <FlatList
    data={images}
    key={"2"}
    numColumns={2}
    renderItem={({ item }) => (
      <Image
        source={item}
        style={{
          width: 180,
          height: 220,
          borderWidth: 2,
          borderColor: "#c35547",
          resizeMode: "contain",
          margin: 6,
        }}
        keyExtractor={(item) => item.id}
      />
    )}
  />
);