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

Question

我是原生 react 新手，最近在我的代码中实现了状态。

我目前有 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;

这很简单。有没有办法让用户按下“点击我打开相机按钮!”然后当他们打开相机时，我希望用户单击“单击我打开相机!”，而不是使用另一个关闭相机的按钮。按钮(再次)并在他们再次单击该按钮时更改该按钮的状态？对于概念证明来说更是如此，这样我就可以知道将来的使用 - 我需要能够在 React Native 中实际录制/停止录制视频，并且我需要理解这个概念。

Answer 1

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

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

尝试一下，让我知道它是否适合您？