React-native-камера не отображается на экране

Question

Я занимаюсь разработкой приложения, которое считывает QR-коды, используя реагирующую камеру, но предварительный просмотр камеры не отображается на экране.

Я работаю на react-native 0.57.7, используя react-native-camera 1.10.0.Я выполнил следующие команды:

npm install react-native-camera --save

react-native link react-native-camera

Вот где я вызываю камеру в своем коде:

import React, {Component} from 'react';
import {View, Image, TouchableOpacity, ScrollView} from 'react-native';
import RNCamera from 'react-native-camera';

class profPresencaScreen extends Component{
<View style={{flex: 1}}>
          <RNCamera 
              ref={ref => {
                this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            />
</View>
}

export default profPresencaScreen;

Откроется диалоговое окно разрешений, в котором даже отображается актив загрузки при первом открытии приложения, но предварительный просмотр камеры никогда не появляется.Есть ли способ показать это в моем приложении?

---

РЕДАКТИРОВАТЬ: Я сделал это работает!Я вручную установил стиль камеры:

<RNCamera 
              ref={ref => {
                this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            style={{flex: 1}}
            />

Все просто!Спасибо всем, кто пытался помочь!

Answer 1

Вы установили права доступа в файле info.plist?

На основании документации: https://github.com/react-native-community/react-native-camera

В iOS 10 и более поздних версиях необходимо добавить в Info ключ «Privacy - Camera Usage Description»..plist вашего проекта.Это должно быть найдено в 'your_project / ios / your_project / Info.plist'.Добавьте следующий код: NSCameraUsageDescription Ваше сообщение пользователю при первом доступе к камере

NSPhotoLibraryUsageDescription Ваше сообщение пользователю при первом обращении к библиотеке фотографий

NSMicrophoneUsageDescription Ваше сообщение дляпользователь при первом обращении к микрофону На Android требуется buildToolsVersion версии 25.0.2+.Это должно быть легко и автоматически загружено Менеджером SDK Android Studio.

В iOS 11 и более поздних версиях необходимо добавить ключ NSPhotoLibraryAddUsageDescription в Info.plist.Этот ключ позволяет вам описать причину, по которой ваше приложение ищет доступ только для записи к пользовательской библиотеке фотографий.Info.plist можно найти в 'your_project / ios / your_project / Info.plist'.Добавьте следующий код:

NSPhotoLibraryAddUsageDescription Ваше сообщение пользователю при первом доступе к библиотеке фотографий

Answer 2

вы можете использовать react-native-camera-kit вместо react-native-camera.

, следуя приведенным ниже шагам.

1] npm install react-native-camera-kit --save
2] react-native link react-native-camera-kit

Перейти к YourReactNativeProject -> android -> app -> src -> main-> AndroidManifest.xml и добавьте ниже разрешение.

<uses-permission android:name="android.permission.CAMERA"/>

Ниже приведен соответствующий код для сканирования камеры / QR-кода.

import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native';

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

export default class App extends Component {
  constructor() {

    super();

    this.state = {

      QR_Code_Value: '',

      Start_Scanner: false,

    };
  }

  openLink_in_browser = () => {

    Linking.openURL(this.state.QR_Code_Value);

  }

  onQR_Code_Scan_Done = (QR_Code) => {

    this.setState({ QR_Code_Value: QR_Code });

    this.setState({ Start_Scanner: false });
  }

  open_QR_Code_Scanner=()=> {

    var that = this;

    if (Platform.OS === 'android') {
      async function requestCameraPermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA, {
              'title': 'Camera App Permission',
              'message': 'Camera App needs access to your camera '
            }
          )
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {

            that.setState({ QR_Code_Value: '' });
            that.setState({ Start_Scanner: true });
          } else {
            alert("CAMERA permission denied");
          }
        } catch (err) {
          alert("Camera permission err", err);
          console.warn(err);
        }
      }
      requestCameraPermission();
    } else {
      that.setState({ QR_Code_Value: '' });
      that.setState({ Start_Scanner: true });
    }
  }
  render() {
    if (!this.state.Start_Scanner) {

      return (
        <View style={styles.MainContainer}>

          <Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</Text>

          <Text style={styles.QR_text}>
            {this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''}
          </Text>

          {this.state.QR_Code_Value.includes("http") ?
            <TouchableOpacity
              onPress={this.openLink_in_browser}
              style={styles.button}>
              <Text style={{ color: '#FFF', fontSize: 14 }}>Open Link in default Browser</Text>
            </TouchableOpacity> : null
          }

          <TouchableOpacity
            onPress={this.open_QR_Code_Scanner}
            style={styles.button}>
            <Text style={{ color: '#FFF', fontSize: 14 }}>
              Open QR Scanner
            </Text>
          </TouchableOpacity>

        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>

        <CameraKitCameraScreen
          showFrame={true}
          scanBarcode={true}
          laserColor={'#FF3D00'}
          frameColor={'#00C853'}
          colorForScannerFrame={'black'}
          onReadCode={event =>
            this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue)
          }
        />

      </View>
    );
  }
}
const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  QR_text: {
    color: '#000',
    fontSize: 19,
    padding: 8,
    marginTop: 12
  },
  button: {
    backgroundColor: '#2979FF',
    alignItems: 'center',
    padding: 12,
    width: 300,
    marginTop: 14
  },
});

Answer 3

У меня была такая же проблема, и настройка captureAdio = {false} помогла мне с этим.

 render() {
    return (
      <Container>     
      <View style={StyleSheet.cameraContainer}>
        <RNCamera
             ref={ref => {
               this.camera = ref;
            }} 
            style = {StyleSheet.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            captureAudio={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes)
            }}
        />
          <Button style = {StyleSheet.capture} 
                  full info large onPress={() => this.takePicture()}>
              <Text> Take picture </Text>
          </Button>                 
      </View>
      </Container>
    );
  }