реагировать на медленное закрытие камеры после сканирования штрих-кода - PullRequest
Новая
       49

реагировать на медленное закрытие камеры после сканирования штрих-кода

0 голосов
/ 20 июня 2020

Я только что узнал о react native. Я использую библиотеку react-native-camera-kit , и при сканировании sh штрих-кода возникают препятствия. Штрих-код был успешно отсканирован, но закрытие камеры заняло некоторое время. Я загружаю данные из API, если загружен только небольшой объем данных, камера закроется быстро, но если данных загружается много, камера закроется медленно. А это мой код. 

import React, {Component} from 'react';
import {View, PermissionsAndroid} from 'react-native';
import {
  Container,
  Content,
  Card,
  CardItem,
  Body,
  Text,
  Button,
  Icon,
  Left,
  Footer,
  Thumbnail,
  Spinner,
  Root,
} from 'native-base';

import {CameraKitCameraScreen} from 'react-native-camera-kit';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: [],
      isLoading: true,
      opneScanner: false,
    };
  }

  async getMoviesFromApiAsync() {
    try {
      const response = await fetch(
        'https://pokeapi.co/api/v2/pokemon?limit=100&offset=200',
      );
      const json = await response.json();
      this.setState({
        movies: json.results,
        isLoading: false,
      });
    } catch (error) {
      console.error(error);
    }
  }

  onBarcodeScan(qrvalue) {
    //called after te successful scanning of QRCode/Barcode
    console.log(qrvalue);
    this.setState({opneScanner: false});
    // this.scan(qrvalue); // other method
  }

  onOpneScanner() {
    var that = this;
    //To Start Scanning
    if (Platform.OS === 'android') {
      async function requestCameraPermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA,
            {
              title: 'CameraExample App Camera Permission',
              message: 'CameraExample App needs access to your camera ',
            },
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            //If CAMERA Permission is granted
            that.setState({opneScanner: true});
          } else {
            alert('CAMERA permission denied');
          }
        } catch (err) {
          alert('Camera permission err', err);
          console.warn(err);
        }
      }
      //Calling the camera permission function
      requestCameraPermission();
    } else {
      that.setState({opneScanner: true});
    }
  }

  componentDidMount() {
    this.getMoviesFromApiAsync();
  }

  render() {
    const {isLoading, opneScanner} = this.state;
    if (!opneScanner) {
      return (
          <Container>
            <Content padder>
              {isLoading ? (
                <Spinner />
              ) : (
                this.state.movies.map((movie, index) => (
                  <Card key={index}>
                    <CardItem>
                      <Left>
                        <Thumbnail
                          source={{
                            uri:
                              'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/220px-React-icon.svg.png',
                          }}
                        />
                        <Body>
                          <Text> {movie.name}</Text>
                          <Text note> {movie.url}</Text>
                        </Body>
                      </Left>
                    </CardItem>
                  </Card>
                ))
              )}
            </Content>

            <Footer>
              <Button
                onPress={() => {
                  this.onOpneScanner();
                }}
                vertical
                success
                style={{
                  width: '100%',
                }}>
                <Icon name="camera" />
                <Text>Scan</Text>
              </Button>
            </Footer>
          </Container>
      );
    }
    return (
      <View style={{flex: 1}}>
        <CameraKitCameraScreen
          showFrame={true}
          //Show/hide scan frame
          scanBarcode={true}
          //Can restrict for the QR Code only
          laserColor={'blue'}
          //Color can be of your choice
          frameColor={'yellow'}
          //If frame is visible then frame color
          colorForScannerFrame={'black'}
          //Scanner Frame color
          onReadCode={(event) => {
            this.onBarcodeScan(event.nativeEvent.codeStringValue);
          }}
        />
      </View>
    );
  }
}

пожалуйста, помогите мне .....

...