Reactjs 使用react native和expo捕获后未初始化图像

我试图在拍摄后显示一幅图像，现在就在相机下面。但是，在我拍摄图像之后，图像变量本身被初始化为：

Promise{“\u 40”：0，\u 55:null，\u 65:0，\u 72:null，}

，并且图像的uri/路径都未定义。

\u maybeRenderImage（）

功能设计为仅在从相机初始化图像后显示图像

相机工作正常，我甚至看到窗口根据图像大小重新调整，但是只有一个白色屏幕而不是图像。我做错了什么？是否与异步调用和

takePicture

函数有关？感谢您的帮助

const StyledCenterView = styled(View)`
  justify-content: center;
  align-items: center;
  flex: 1;
`;

interface CameraState {
  permissionsGranted: boolean;
  image: any;
  type: any;
}

class CameraView extends React.Component<any, CameraState> {
  camera:any = null;

  constructor(props: any) {
    super(props);
    this.state = {
      permissionsGranted: null,
      image: null,
      type: Camera.Constants.Type.back,
    };
  }

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ permissionsGranted: status === 'granted' });
  }

  takePicture = () => {
    if (this.camera) {
      const photo = this.camera.takePictureAsync();
      console.log(photo.uri);
      console.log(photo.path);
      this.setState({ image: photo });
    }
  }

  _maybeRenderImage = () => {
    const { image } = this.state;
    if (image) {
      console.log('got an image!');
      return <Image
      source={{ uri: image.uri }}
        style={{ width: 250, height: 250 }} />;
    } else {
      console.log('no image in state');
    }
  }

  render() {
    const { permissionsGranted } = this.state;
    if (permissionsGranted === null) {
      return <Text>Access not asked for</Text>;
    } else if (permissionsGranted === false) {
      return <Text>Change permissions to allow camera usage!</Text>;
    } else {
      return(
      <View flex>
        <Camera
          ref={(ref:any) => {
            this.camera = ref;
          }}
          style={{ flex: 1 }}>
        </Camera>
        <TouchableOpacity
          onPress={this.takePicture}
          style={{ alignSelf: 'center' }}>
          <Ionicons name="ios-radio-button-on" size={70} color="black" />
        </TouchableOpacity>

        {this._maybeRenderImage()}

      </View>
      );
    }
  }
}

export default CameraView;

const StyledCenterView=styled（视图）`
证明内容：中心；
对齐项目：居中；
弹性：1；
`;
接口摄像状态{
permissionsGranted:布尔值；
图像：任何；
类型：任意；
}
类CameraView扩展了React.Component{
摄像机：任意=空；
构造器（道具：任何）{
超级（道具）；
此.state={
permissionsGranted:null，
图像：空，
类型：Camera.Constants.type.back，
};
}
异步组件willmount（）{
const{status}=wait Permissions.askAsync（Permissions.CAMERA）；
this.setState（{permissionsGranted:status=='grated'}）；
}
拍照=（）=>{
如果（这个相机）{
const photo=this.camera.takePictureAsync（）；
log（photo.uri）；
console.log（photo.path）；
this.setState（{image:photo}）；
}
}
_maybeRenderImage=（）=>{
const{image}=this.state；
如果（图像）{
log（'获得图像！'）；
返回；
}否则{
log（“状态中没有映像”）；
}
}
render（）{
const{permissionsGranted}=this.state；
if（permissionsGranted==null）{
未要求返回访问权限；
}else if（permissionsGranted==false）{
返回更改权限以允许使用相机！；
}否则{
返回(
{
this.camera=ref；
}}
样式={{flex:1}}>
{this.\u maybeRenderImage（）}
);
}
}
}
导出默认的CameraView；

我今天遇到了同样的问题，并发现了这个问题（通过搜索我看到的结果值中的值！）@Cherniv的评论是正确的，我将重写它作为完整性的答案（以防他的JSFIDLE消失）

takePictureAsync

返回承诺；解决此问题的最简单方法是使用

wait

，这意味着您需要使

takePicture

功能

async

，如下所示：

takePicture = async () => {   // added "async" here
  if (this.camera) {
    const photo = await this.camera.takePictureAsync(); // added "await" here
    console.log(photo.uri);
    console.log(photo.path);
    this.setState({ image: photo });
  }
}

---

它返回异步承诺，因此请尝试以下方法：