реагировать родной - как работает состояние с кнопками

Question

Я новичок, чтобы реагировать на нативный и недавно внедрил состояние в моем коде.

В настоящее время у меня есть 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;

это очень просто. Будет ли для меня способ, чтобы пользователь нажал кнопку «Нажми меня, чтобы открыть кнопку камеры!». и затем, когда они открывают камеру, вместо того, чтобы иметь другую кнопку, закрывающуюся вне камеры, я хочу, чтобы пользователи нажимали кнопку «нажмите меня, чтобы открыть камеру!» кнопку (снова) и изменить состояние этой кнопки, если они нажимают ее снова? Это тем более для подтверждения концепции, чтобы я мог знать для будущего использования - мне нужно иметь возможность фактически записать / прекратить запись видео в режиме «реагировать на натив», и мне нужно понять эту концепцию.

Answer 1

РЕШЕНИЕ

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;

Надеюсь, это поможет:)

Answer 2

Вы можете использовать переключатель значения bool переменной состояния.

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

Попробуйте это, и дайте мне знать, это работает для вас или нет?

Answer 3

Вам просто нужно изменить onPress событие Button в соответствии с состоянием showCamera.

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