Ich bin neu, um nativ zu reagieren, und habe kürzlich den Status in meinem Code implementiert.

Ich habe derzeit zwei Schaltflächen: eine zum Öffnen der Kamera in meiner App und eine zum Schließen der Kamera.

Was ich wissen möchte, ist Folgendes: Gibt es eine Möglichkeit für mich, den Status einer Schaltfläche basierend auf dem Zeitpunkt zu ändern, zu dem sie gedrückt wurde? Beispiel: Wenn ich eine Taste drücke, nimmt die Taste ein Video auf, aber wenn ich dieselbe Taste erneut drücke, wird sie gestoppt. Ich weiß derzeit nur, wie ich den Status in einer solchen Situation ändern kann, indem ich zwei verschiedene Schaltflächen verwende, anstatt den Status innerhalb einer einzelnen Schaltfläche zu ändern.

Hier ist mein Code, den ich bisher für meine 2 Tasten zum Öffnen und Schließen der Kamera habe:

class CameraButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showCamera: false,
    };
  }

  showCamera = () => this.setState({showCamera: true});
  hideCamera = () => this.setState({showCamera: false});

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.showCamera}
          title="click me to open the camera!"
          color="#841584"
        />
        {this.state.showCamera && <DeviceCamera />}
        <Button
          title="click me to close the camera!"
          onPress={this.hideCamera}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default CameraButton;

Es ist sehr einfach. Gibt es eine Möglichkeit für mich, den Benutzer dazu zu bringen, auf "Klicken Sie auf mich, um die Kamerataste zu öffnen!" Zu drücken. und dann, wenn sich die Kamera öffnet, möchte ich, dass Benutzer auf "Klicken Sie auf mich, um die Kamera zu öffnen!" klicken, anstatt eine weitere Schaltfläche zu haben, die sich aus der Kamera schließt. Schaltfläche (erneut) und ändern Sie den Status dieser Schaltfläche, wenn sie erneut darauf klicken? Dies gilt eher für den Proof of Concept, damit ich ihn für die zukünftige Verwendung kennen kann. Ich muss in der Lage sein, ein Video innerhalb von React Native aufzunehmen / zu stoppen, und ich muss dieses Konzept verstehen.

1
banna 24 Feb. 2020 im 06:32

3 Antworten

Beste Antwort

Sie müssen nur das Ereignis onPress des Button entsprechend dem Status showCamera ändern.

       <Button
              onPress={this.state.showCamera ? this.hideCamera : this.showCamera}
              title={this.state.showCamera 
                ? "click me to hide the camera!"
                : "click me to open the camera!"}
              color="#841584"
       />
0
huytc 24 Feb. 2020 im 03:48

Sie können den Bool-Wert der Statusvariablen umschalten.

ShowButton = () => {
let prevState = this.state.showCamera;
this.setState({showCamera: !prevState}); //It will toggle the value
}

Probieren Sie es aus und lassen Sie mich wissen, ob es für Sie funktioniert oder nicht.

0
Ronak 24 Feb. 2020 im 03:47

LÖSUNG

class CameraButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showCamera: false
    };
  }

  showCamera = () => this.setState({ showCamera: true });
  hideCamera = () => this.setState({ showCamera: false });

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.state.showCamera ? this.hideCamera : this.showCamera}
          title={this.state.showCamera ? "Hide Camera!" : "Show Camera"}
          color="#841584"
        />
        {this.state.showCamera && <DeviceCamera />}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

export default CameraButton;

Ich hoffe es hilft :)

0
Akila Devinda 24 Feb. 2020 im 04:00