中文网
Nodejs.cn 旗下网站
首页指南EAS参考教程

使用图片选择器

在本教程中，学习如何使用 Expo Image Picker。

React Native 提供内置组件作为标准构建块，例如 <View>、<Text> 和 <Pressable>。我们正在构建一个从设备的媒体库中选择图片的功能。核心组件无法做到这一点，我们需要一个库来在我们的应用中添加此功能。

¥React Native provides built-in components as standard building blocks, such as <View>, <Text>, and <Pressable>. We are building a feature to select an image from the device's media gallery. This isn't possible with the core components and we'll need a library to add this feature in our app.

我们将使用 expo-image-picker，这是 Expo SDK 中的一个库。

¥We'll use expo-image-picker, a library from Expo SDK.

expo-image-picker 提供对系统 UI 的访问，以从手机库中选择图片和视频。

¥expo-image-picker provides access to the system's UI to select images and videos from the phone's library.

Watch: Using an image picker in your universal Expo app
Watch: Using an image picker in your universal Expo app

1

Install expo-image-picker

To install the library, run the following command:

!!!IG9!!!

Tip: Any time we install a new library in our project, stop the development server by pressing Ctrl + c in the terminal and then run the installation command. After the installation completes, we can start the development server again by running npx expo start from the same terminal window.

2

Pick an image from the device's media library

expo-image-picker provides launchImageLibraryAsync() method to display the system UI by choosing an image or a video from the device's media library. We'll use the primary themed button created in the previous chapter to select an image from the device's media library and create a function to launch the device's image library to implement this functionality.

In app/(tabs)/index.tsx, import expo-image-picker library and create a pickImageAsync() function inside the Index component:

!!!IG18!!!

!!!IG1!!!

Let's learn what the above code does:

  • The launchImageLibraryAsync() receives an object to specify different options. This object is the ImagePickerOptions object, which we are passing when invoking the method.
  • When allowsEditing is set to true, the user can crop the image during the selection process on Android and iOS.

3

Update the button component

On pressing the primary button, we'll call the pickImageAsync() function on the Button component. Update the onPress prop of the Button component in components/Button.tsx:

!!!IG19!!!

!!!IG2!!!

In app/(tabs)/index.tsx, add the pickImageAsync() function to the onPress prop on the first <Button>.

!!!IG20!!!

!!!IG3!!!

The pickImageAsync() function invokes ImagePicker.launchImageLibraryAsync() and then handles the result. The launchImageLibraryAsync() method returns an object containing information about the selected image.

Here is an example of the result object and the properties it contains:

!!!IG10!!!

!!!IG11!!!

!!!IG4!!!

!!!IG12!!!

!!!IG13!!!

!!!IG5!!!

!!!IG14!!!

!!!IG15!!!

!!!IG6!!!

!!!IG16!!!

!!!IG17!!!

4

Use the selected image

The result object provides the assets array, which contains the uri of the selected image. Let's take this value from the image picker and use it to show the selected image in the app.

Modify the app/(tabs)/index.tsx file:

  1. Declare a state variable called selectedImage using the useState hook from React. We'll use this state variable to hold the URI of the selected image.
  2. Update the pickImageAsync() function to save the image URI in the selectedImage state variable.
  3. Pass the selectedImage as a prop to the ImageViewer component.

!!!IG21!!!

!!!IG7!!!

Pass the selectedImage prop to the ImageViewer component to display the selected image instead of a placeholder image.

  1. Modify the components/ImageViewer.tsx file to accept the selectedImage prop.
  2. The source of the image is getting long, so let's also move it to a separate variable called imageSource.
  3. Pass imageSource as the value of the source prop on the Image component.

!!!IG22!!!

!!!IG8!!!

In the above snippet, the Image component uses a conditional operator to load the image's source. The picked image is a uri string, not a local asset like the placeholder image.

Let's take a look at our app now:

The images used for the example app in this tutorial were picked from Unsplash.

Summary

Chapter 4: Use an image picker

We've successfully added the functionality to pick an image from the device's media library.

In the next chapter, we'll learn how to create an emoji picker modal component.

Next: Create an emoji picker modal