如何在React Native中显示EXPO摄像机的图像

如何解决如何在React Native中显示EXPO摄像机的图像

我正在应用程序中的相机上工作，我已经拍照了，现在已经转换为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}}/>

解决方法

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

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传递为路由参数。

,

我假设您正在将照片的价值存储在cameraImage中。 我正在使用Expo Image Picker与您共享一个可行的解决方案，请尝试一下

您的组件

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);
    }
}