Question

我是React Native的新用户，我正在尝试创建一个应用程序，该应用程序将使用Expo的Camera和Takesnapshot Async来拍照并将其保存到Cameraroll。

我可能正在做一些非常愚蠢的事情，但是现在（即使在我按下快照按钮之前视图显示了相机），当我点击按钮而不是图像时，我的代码正在保存黑色图像被相机拍摄到相机胶卷。

以下是我的CameraScreen代码（我使用https://docs.expo.io/versions/latest/sdk/camera代码打开相机并从https://snack.expo.io/SJRvlSxvb代码保存快照）：

class CameraScreen extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
    cameraRollUri: null,
  };

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

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }} >
          <Camera style={{ flex: 1 }} 
            type={this.state.type}
            collapsable={false}
              ref={view => {
                this._container = view;
              }} >
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }} >

            {this.state.cameraRollUri &&
            <Image
              source={{ uri: this.state.cameraRollUri }}
              style={{ width: 200, height: 200 }
            }
            />}

            <TouchableOpacity style={styles.gridItem} onPress={this._saveToCameraRollAsync}>
            </TouchableOpacity>

              <TouchableOpacity
                style={{
                  flex: 0.1,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.setState({
                    type: this.state.type === Camera.Constants.Type.back
                      ? Camera.Constants.Type.front
                      : Camera.Constants.Type.back,
                  });
                }}>
                <Text
                  style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
                  {' '}Flip{' '}
                </Text>
              </TouchableOpacity>

            </View>
          </Camera>
        </View>
      );
    }


  }
    _saveToCameraRollAsync = async () => {
    let result = await takeSnapshotAsync(this._container, {
      format: 'png',
      result: 'file',
    });

    let saveResult = await CameraRoll.saveToCameraRoll(result, 'photo');
    this.setState({ cameraRollUri: saveResult });
  };
}

我首先认为保存到this._components的视图不是正确的视图，但我尝试附加代码

ref={view => {
                this._container = view;
              }

对班级中的不同观点，但似乎没有任何改变。

提前感谢您提供任何帮助 - 我很长时间以来一直在为此努力:(

PS：这是我的第一个堆栈溢出帖子;如果我的帖子有任何问题，我会提前道歉。

Answer 1

Expo Camera不支持快照，而是可以使用Camera中的方法takePictureAsync返回图像对象。

const image = await this._container.takePictureAsync();

Answer 2

Expo的相机组件不支持takeSnapshotAsync。

否则，如果您正在使用任何Expo-pixi组件，则此代码可能会有所帮助：

const { uri } = await this.sketch.takeSnapshotAsync();

//save sketch/signature/doodles in DCIM folder.

let saveResult = await CameraRoll.saveToCameraRoll(uri, 'photo');

Expo React Native TakeSnapShot Async返回黑屏

2 个答案: