如何在 React Native Application 中显示本地图像？

在本文中，我们将学习在 React Native 应用程序中显示手机图库中的图像。我们将使用 react-native-image-picker 选择图像并将其显示在我们的应用程序中。您可以在本文末尾找到此包的 API 参考。

第 1 步：要初始化一个新的 React Native 应用程序，请执行以下命令：

npx react-native init LocalImagePicker

第 2 步：现在，进入项目文件夹并安装react-native-image-picker包，执行以下命令：

cd LocalImagePicker
npm i react-native-image-picker

项目结构：应该是这样的。

项目结构

我们需要修改 App.js 文件，并开发以下组件，以便应用程序选择并显示本地图像：

1. Button ：一个基本的 React Native 按钮组件，当用户点击按钮时，它会打开图库。
2. Image：一个基本的 React Native Image 组件，用于显示来自选取器的响应图像。

我们需要从react-native-image- picker 导入launchImageLibrary ，它接受选项和回调函数作为参数。使用选项，您可以指定 mediaType、selectionLimit、maxHeight、maxWidth 和其他属性。使用响应对象调用回调方法，这将基本上设置我们的 pickerResponse 状态变量。

App.js

import React,{useState} from 'react';
import type {Node} from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Image
} from 'react-native';
  
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
  
import { launchImageLibrary } from 'react-native-image-picker';
  
const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';
  
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  };
  
  const [pickerResponse, setPickerResponse] = useState(null);
  
  const openGallery = () => {
    const options = {
      selectionLimit: 1,
      mediaType: 'photo',
      includeBase64: false,
    };
    launchImageLibrary(options, setPickerResponse);
  };
  
  const uri = pickerResponse?.assets && pickerResponse.assets[0].uri;
  
  return (
    
      
      {
        uri && (
          
          
        )
      }
    
  );
};
  
export default App;

我们创建了一个状态变量 pickerResponse，它保存了响应对象。我们创建 openGallery 方法，在这里我们设置定义选项对象，并调用launchImageGallery方法。您可以调整这些选项并观察响应以更好地理解。选择图像后，pickerResponse 对象将保存此资产，我们使用uri访问图像。为了渲染图像，我们使用条件渲染，这意味着只有设置了 uri 时，图像组件才会以源值作为 URI 进行渲染。

运行应用程序的步骤：要运行应用程序，启动服务器，执行以下命令：

npx react-native start
npx react-native run-android

输出：

库 API 参考： https://www.npmjs.com/package/react-native-image-picker