如何在react native中使用按钮截图？

Question

我想开发一个简单的应用程序，可以采取一个按钮的当前屏幕截图。此代码成功运行，但当我按下捕获按钮时，它不工作并返回错误。

​

export default class App extends Component<{}> {
  render() {
    captureScreen({
      format: "jpg",
      quality: 0.8
    })
    .then(
      uri => console.log("Image saved to", uri),
      error => console.error("Oops, snapshot failed", error)
    );
    
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native SnapShot!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <Button
          onPress={captureScreen.bind(this)}
          title="capture"
          color="#841584"
          accessibilityLabel="Capture"
        />
      </View>
    );
  }
}

​

Answer 1

为什么你要在render中截取截图？我认为您需要将屏幕截图片段移动到一个单独的函数中。

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native SnapShot!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <Button
          onPress={() => {
            captureScreen({
              format: "jpg",
              quality: 0.8
            })
            .then(
              uri => console.log("Image saved to", uri),
              error => console.error("Oops, snapshot failed", error)
            );
          }}
          title="capture"
          color="#841584"
          accessibilityLabel="Capture"
        />
      </View>
    );
  }
}