如何在 React Native 中显示 expo 相机的图像答案

【问题标题】：How to display an image of expo camera in React Native如何在 React Native 中显示 expo 相机的图像
【发布时间】：2020-12-13 11:16:44
【问题描述】：

我正在应用程序中的相机上工作，我在其中拍照并转换为 base64 现在我想显示图像但无法显示图像。有人可以帮助我如何实现这个目标。

谢谢

  takePicture = async () => {
    if (this.camera) {
        let photo = await this.camera.takePictureAsync({
            base64: true,
        });
        this.props.cameraToggle(false);
        this.props.image(photo)
        console.log('@@@ take picutre', photo)
    }
}

我要渲染的图像代码

<Image source={{uri:`data:image/png;base64,${cameraImage}`}} style={{width:100,height:100}}/>

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6 expo

【解决方案1】：

我假设您正在使用基于类的组件。您可以通过将响应 photo 设置为本地状态并有条件地渲染它来渲染从 camera 捕获的 image。

import React from "react";
import { Image } from "react-native";
import { Camera } from "expo-camera";
import Constants from "expo-constants";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";

class Cameras extends React.Component(props) {
  state = {
    captures: "",
  };

  takePicture = async () => {
    if (this.camera) {
      let photo = await this.camera.takePictureAsync({
        base64: true,
      });
      this.props.cameraToggle(false);
      this.setState({ captures: photo.uri });
    }
  };

  render() {
    const { captures } = this.state;
    return (
      <View flex={1}>
        {this.state.captures ? (
          <Image source={{ uri: captures }} style={{width:50,height:50}} />
        ) : (
          <Camera {...pass in props} />
        )}
      </View>
    );
  }
}

export default Cameras;

注意： 一种更简洁的方法是通过导航不同的屏幕并在该屏幕上渲染图像来传递状态 captures 作为路由参数。

【讨论】：

【解决方案2】：

我假设您将照片的价值存储在 cameraImage 中。我正在使用 expo 图像选择器与您分享一个可行的解决方案，试试看

你的组件

import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';

<TouchableHighlight onPress={this._openCamera}>
    <Text>Open Camera</Text>
</TouchableHighlight>

<Image source={this.state.mainImageUrl} />

你的功能

_openCamera = async () => {
    await Permissions.askAsync(Permissions.CAMERA);
    try {
        let result: any = await ImagePicker.launchCameraAsync({
            base64: true,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });
        if (!result.cancelled) {
            this.setState({
                mainImageUrl: { uri: `data:image/jpg;base64,${result.base64}` }
            });
        }
    } catch (E) {
        console.warn(E);
    }
}

【讨论】：