Как включить / выключить React Native Camera Torch - PullRequest
0 голосов
/ 14 октября 2019

Я работаю над приложением React Native, которое сканирует штрих-коды. Я хочу, чтобы пользователь включал и выключал свет нажатием кнопки. Прямо сейчас свет горит постоянно. Возможно ли это с компонентом камеры React Native? Спасибо!

class CameraScreen extends React.Component {
  state = {
    isCameraReady: false
  };

  constructor(props) {
    super(props);
    this.handleCameraReady = this.handleCameraReady.bind(this);
    this.state = {
      camera: {
        type: RNCamera.Constants.Type.back
      }
    };
  }
  handleCameraReady() {
    this.setState({
      isCameraReady: true
    });
  }

  onBarCodeRead = data => {
    this.setState({ scanned: true });
    const DATA_SKU = data.data.split("*");
    const SKU = DATA_SKU[0];
    const STK_ID = DATA_SKU[1] !== undefined ? DATA_SKU[1] : "";
    this.setState({ showCamera: false });
    this.props.navigation.navigate("Home", {
      scanDataSku: SKU,
      scanDataStkID: STK_ID
    });
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <RNCamera
          style={styles.container}
          onBarCodeRead={this.onBarCodeRead}
          ref={cam => (this.camera = cam)}
          cameraProps={{ captureAudio: false }}
          flashMode={
            this.state.isCameraReady
              ? RNCamera.Constants.FlashMode.torch
              : RNCamera.Constants.FlashMode.off
          }
          onCameraReady={this.handleCameraReady}
        ></RNCamera>
        <View style={styles.bottomNav}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate("Home")}
            style={styles.bottomBtn}
          >
            <Text style={styles.bottomTxt}>Back</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.bottomBtn}>
            <Text style={styles.bottomTxt}>Light</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

1 Ответ

1 голос
/ 14 октября 2019

Да - я сделал нечто подобное:

toggleTorch()
{
    let tstate = this.state.torchon;
    if (tstate == RNCamera.Constants.FlashMode.off){
       tstate = RNCamera.Constants.FlashMode.torch;
    } else {
       tstate = RNCamera.Constants.FlashMode.off;
    }
    this.setState({torchon:tstate})
}

и затем установил режим вспышки в соответствующее состояние:

<RNCamera
    flashMode={this.state.torchon}
    ...

Вот как я определил кнопку:

<TouchableOpacity style={styles.toggleTorch}  onPress={() => this.toggleTorch() }>
{ this.state.torchon == RNCamera.Constants.FlashMode.off? (
        <Image style={styles.iconbutton} source={require('../images/flash.png')} />
    ) : (
        <Image style={styles.iconbutton} source={require('../images/flash-on.png')} />
    )
}
</TouchableOpacity
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...