React Native - 状态如何与按钮一起工作

Question

我是 React Native 的新手，最近在我的代码中实现了状态。

我目前有 2 个按钮：一个用于在我的应用程序中打开相机，一个用于关闭相机。

我想知道的是：是否有一种方法可以让我根据按下按钮的时间来更改按钮的状态？例如：如果我按下一个按钮，该按钮将录制一段视频，但如果我再次按下同一个按钮，它就会停止。我目前只知道如何在这种情况下通过使用 2 个不同的按钮来更改状态，而不是在单个按钮内更改状态。

这是我目前拥有的用于打开和关闭相机的 2 个按钮的代码：

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;

很简单。我有没有办法让用户按下 "click me to open the camera button!" 然后当他们打开相机时，我想让用户点击 "click me to open the camera!" 按钮而不是让另一个按钮关闭相机（再次）并在他们再次单击时更改此按钮的状态？这对于概念验证更是如此，因此我可以知道以备将来使用 - 我需要能够实际 record/stop 在 React Native 中录制视频，我需要理解这个概念。

Answer 1

您可以使用切换状态变量的布尔值。

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

试试这个，让我知道它是否适合你？

Answer 2

你只需要根据showCamera状态改变Button的onPress事件即可。

       <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"
       />

Answer 3

解决方案

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;

希望对您有所帮助:)

React Native - 状态如何与按钮一起工作

react native - how state works with buttons

javascript

reactjs

react-native

react-state-management

react-state