【问题标题】:How to toggle React Native Camera Torch on/off如何打开/关闭 React Native Camera Torch
【发布时间】:2020-02-11 05:45:24
【问题描述】:

我正在开发一个扫描条形码的 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>
    );
  }
}

【问题讨论】:

    标签: javascript react-native mobile


    【解决方案1】:

    是的 - 我做了类似的事情:

    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
    

    【讨论】:

    • 你太棒了,非常感谢!效果很好。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-18
    • 2016-09-22
    • 2019-01-07
    • 2019-12-26
    • 2023-03-04
    • 2017-06-08
    相关资源
    最近更新 更多