Question

我正在尝试：

1）按下按钮以访问摄像机（导航到下一个屏幕）

2）拍照

3）返回主屏幕

4）在主屏幕上显示照片

当前，我从第二个屏幕检索到主屏幕的base64图像字符串，但无法在主屏幕中显示它。希望对此有一些建议。谢谢！

主屏幕：

constructor() {
    super()
    this.state = {
       base64Image: ''
    }
 }
 ...
<Button
 title="Camera"
 onPress={() => this.props.navigation.navigate('Camera', {
 onGoBack: this.refresh,
 })}
 />

 <Image
   style={{width: 100, height: 100}}
   source={{uri: 'data:image/png;base64,${this.state.base64Image}'}}
 />
 ...
refresh=(data)=> {
    console.log("Invoked from camera method");
    console.log(data);
    this.setState({base64Image: data});
 }

第二屏（相机屏幕）

 await this.camera.takePictureAsync(options).then(photo => {          
    this.props.navigation.state.params.onGoBack(photo.base64);   
    this.props.navigation.goBack();        
 });

Answer 1

您必须在此行的{base64: true}中包含options

await this.camera.takePictureAsync(options).then(photo => {

我不确定您是否包括了该内容，因为您没有在问题中提供options对象。

这也是基本的操作，但是请确保在此行上使用反引号（esc下的反引号），否则语法将不起作用：

source={{uri: 'data:image/png;base64,${this.state.base64Image}'}}

希望这会有所帮助。

从相机取回后，expo -base64图像未动态显示

1 个答案: