react-native-component / react-native-smart-barcode

A smart barcode scanner component for React Native app.
MIT License
308 stars 168 forks source link

I've got just a black screen #32

Open rodrigofbm opened 6 years ago

rodrigofbm commented 6 years ago
import React, {
  Component,
} from 'react'
import {
  View,
  StyleSheet,
  Alert,
} from 'react-native'

import Barcode from 'react-native-smart-barcode'
import TimerEnhance from 'react-native-smart-timer-enhance'

class BarcodeTest extends Component {
  constructor(props) {
      super(props);
      this.state = {
          viewAppear: false,
      };
  }

  render() {

      return (
          <View style={{flex: 1, backgroundColor: 'black',}}>
              {this.state.viewAppear ? <Barcode style={{flex: 1, }}
                ref={ component => this._barCode = component }
                onBarCodeRead={this._onBarCodeRead}/> : null}
          </View>
      )
  }

  componentDidMount() {
      let viewAppearCallBack = (event) => {
          this.setTimeout( () => {
              this.setState({
                  viewAppear: true,
              })
          }, 255)

      }
      this._listeners = [
          //this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack)
      ]

  }

  componentWillUnmount () {
     // this._listeners && this._listeners.forEach(listener => listener.remove());
  }

  _onBarCodeRead = (e) => {
      console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`)
      this._stopScan()
      Alert.alert(e.nativeEvent.data.type, e.nativeEvent.data.code, [
          {text: 'OK', onPress: () => this._startScan()},
      ])
  }

  _startScan = (e) => {
      this._barCode.startScan()
  }

  _stopScan = (e) => {
      this._barCode.stopScan()
  }

}

export default TimerEnhance(BarcodeTest)

My code above. On the app just show a black screen. PS: I'm not using navigation, but rn router flux

KesavSundarM commented 6 years ago

I had similar issue, Add the following lines in AndroidManifest.xml to give permission to access camera. This fixed.

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>

Also replace

this._listeners = [ //this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack) ]

With

this.timer = setTimeout( () => { this.setState({ viewAppear: true, }) }, 255)

Also add

this.timer && clearTimeout(this.timer);

in the componentWillUnmount ()

ruk91 commented 6 years ago

@rodrigofbm , @KesavSundarM , Hi , You should give permissions from device settings, or you can use react-native-permissions.

bigkrys commented 5 years ago

I had similar issue, Add the following lines in AndroidManifest.xml to give permission to access camera. This fixed.

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>

Also replace

this._listeners = [ //this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack) ]

With

this.timer = setTimeout( () => { this.setState({ viewAppear: true, }) }, 255)

Also add

this.timer && clearTimeout(this.timer);

in the componentWillUnmount ()

i did it ,but i does not work,it still balck screen