时间戳

首页 > 解决方案 > 如何在 react native 中使用 expo-image-picker 上传图像

react-native - 如何在 react native 中使用 expo-image-picker 上传图像

问题描述

我想知道如何使用 expo-image-picker 上传图片。

目前我的世博项目有这个警告：

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on android as it keeps the timer module awake, and the timers can only be called when the app is in the foreground.

我正在寻找描述如何上传图像并修复此警告的答案。

标签： react-nativeexpo

解决方案

在这里，您可以找到关于警告“长时间设置计时器..”的第二个问题的答案。

对于您的第一个问题，最好查看文档： https ://docs.expo.io/versions/latest/sdk/imagepicker/

在这里您可以找到所有可能的方法以及如何选择图像的示例：

import * as React from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

export default class ImagePickerExample extends React.Component {
  state = {
    image: null,
  };

  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  componentDidMount() {
    this.getPermissionAsync();
    console.log('hi');
  }

  getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

推荐阅读