Javascript react native-状态如何使用按钮

我是一个新的本地人，最近在代码中实现了state

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

我想知道的是：有没有办法根据按钮被按下的时间来改变它的状态？例如：如果我按下一个按钮，该按钮将录制视频，但如果我再次按下该按钮，它将停止。我目前只知道如何在这种情况下通过使用两个不同的按钮来改变状态，而不是在单个按钮内改变状态

这是我的代码，到目前为止，我有两个打开和关闭相机的按钮：

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;

类CameraButton扩展组件{
建造师（道具）{
超级（道具）；
此.state={
摄像机：错，
};
}
showCamera=（）=>this.setState（{showCamera:true}）；
hideCamera=（）=>this.setState（{showCamera:false}）；
render（）{
返回(
{this.state.showCamera&&}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});
导出默认摄像机按钮；

---

这很简单。我是否有办法让用户按下“单击我打开相机按钮！”然后当他们打开相机时，我想让用户（再次）单击“单击我打开相机！”按钮，并在再次单击时更改此按钮的状态，而不是让另一个按钮关闭相机？这对于概念验证来说更为重要，这样我就可以知道未来的用途-我需要能够在react native中实际录制/停止录制视频，并且我需要理解这个概念

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

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

---

试试这个，让我知道它对你有用吗？

你只需要根据

showCamera

状态更改

按钮的
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"
       />

解决方案

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;

类CameraButton扩展组件{
建造师（道具）{
超级（道具）；
此.state={
镜头：错
};
}
showCamera=（）=>this.setState（{showCamera:true}）；
hideCamera=（）=>this.setState（{showCamera:false}）；
render（）{
返回(
{this.state.showCamera&&}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：“F5FCFF”
},
说明：{
textAlign：“居中”，
颜色：“333333”，
marginBottom:5
}
});
导出默认摄像机按钮；

希望有帮助：）