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

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

В настоящее время у меня есть 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, и мне нужно понять эту концепцию.


react-native reactjs javascript react-state react-state-management
person izzyk2517    schedule 24.02.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вам просто нужно изменить событие 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"
       />
person huytc    schedule 24.02.2020

arrow_upward
1
arrow_downward

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

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

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

person Ronak    schedule 24.02.2020

arrow_upward
1
arrow_downward

РЕШЕНИЕ

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;

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

person Akila Devinda    schedule 24.02.2020