Доступ к камере в реакторе Native

Question

TL; DR: Не работает с симулятором IOS10. Однако IOS9 кажется прекрасным.

Я пытался внедрить модуль Lanswrough react-native-camera, который все, кажется, рекомендуют. После 10 часов неудач, чтобы заставить его работать, мне действительно нужна помощь.

Я сдался, пытаясь получить его в свой существующий проект, так что теперь я просто пытаюсь сделать это с нуля в совершенно новой области. Это то, что я делаю:

react-native init cameraProject 

ОК, новый проект. Давайте просто убедитесь, что версии правы:

react-native -v 

я react-native-cli: 1.0.0 react-native: 0.36.0 вернулся. Просто чтобы проверить требования полностью:

java -version 

Возвращает: Java версия "1.8.0_112" Java (TM) SE Runtime Environment (сборка 1.8.0_112-b16) Java HotSpot (TM) 64-разрядного сервера VM (сборка 25.112-b16, смешанный режим)

Таким образом, требования выглядят солидно. Сейчас:

react-native run-ios 

Успех - приложение работает в симуляторе, все работает так, как должно. Теперь я пытаюсь выполнить документацию, чтобы установить камеру-реагирующую. Во-первых, в iOS10 есть новый раздел требований, который работает мой симулятор. Вам необходимо добавить ключ конфиденциальности относительно камеры в файл Info.plist. Это, похоже, было опущено из файла Info Info исходного кода, и в документации отсутствует требуемый код. Я порылся и добавил следующее cameraProject/ios/cameraProject/Info.plist:

<key>NSPhotoLibraryUsageDescription</key> 
<string>Going to use some photos</string> 

Это добавило в алфавитном порядке в списке, вокруг линии 25. Освежающая симулятор и это все хорошо. Далее:

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save 

следуют:

react-native link react-native-camera 

Совершенная; Я получаю сообщения, которые я ожидаю:

rnpm-install info Linking react-native-camera android dependency 
rnpm-install info Android module react-native-camera has been successfully linked 
rnpm-install info Linking react-native-camera ios dependency 
rnpm-install info iOS module react-native-camera has been successfully linked 

Все по-прежнему работает так, как должно. В разделе «Использование». Я собираюсь скопировать и вставить код из GitHub в модуль BadInstagramCloneApp.js. Затем я буду импортировать его в index.ios.js с базовым import BadInstagramCloneApp from './BadInstagramCloneApp';, и мы будем прикреплять его в основном корпусе с помощью <BadInstagramCloneApp /> ,

Обновить имитатор: Error

Alright, поэтому выйти из симулятора, закройте терминал и повторно запустить react-native run-ios, как я считаю, что следует восстановить. Он по-прежнему не работает, бросает:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'cameraProject'. 

Я загрузил Xcode и посмотрел на ручные инструкции для ссылки на файлы. В моей папке библиотеки уже есть файл RCTCamera.xcodeproj.Он также уже получил libRCTCamera.a в разделе Camera Object -> Build Phases-> Link Binary with Libraries. Пути поиска заголовков содержат правильные элементы, и оба они помечены как «рекурсивные» в соответствии с инструкциями. Затем CMD + R для запуска проекта. Новый симулятор загружается, похоже, что он будет работать, а затем падает с тем же красным экраном. Закройте Xcode, запустите react-native run-ios снова из терминала (говорит, что сработала строка), и она по-прежнему дает ту же ошибку, что и выше.

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

Предложения? Все, что я хочу сделать, это позволить пользователю сделать снимок, а затем вернуть эту фотографию в качестве кодированного объекта Base64.

index.ios.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

import BadInstagramCloneApp from './BadInstagramCloneApp'; 

export default class cameraProject extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <BadInstagramCloneApp /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    } 
}); 

AppRegistry.registerComponent('cameraProject',() => cameraProject); 

BadInstagramCloneApp.js

'use strict'; 
import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Dimensions, 
    StyleSheet, 
    Text, 
    TouchableHighlight, 
    View 
} from 'react-native'; 
import Camera from 'react-native-camera'; 

class BadInstagramCloneApp extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Camera 
      ref={(cam) => { 
      this.camera = cam; 
      }} 
      style={styles.preview} 
      aspect={Camera.constants.Aspect.fill}> 
      <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text> 
     </Camera> 
     </View> 
    ); 
    } 

    takePicture() { 
    this.camera.capture() 
     .then((data) => console.log(data)) 
     .catch(err => console.error(err)); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    preview: { 
    flex: 1, 
    justifyContent: 'flex-end', 
    alignItems: 'center', 
    height: Dimensions.get('window').height, 
    width: Dimensions.get('window').width 
    }, 
    capture: { 
    flex: 0, 
    backgroundColor: '#fff', 
    borderRadius: 5, 
    color: '#000', 
    padding: 10, 
    margin: 40 
    } 
}); 

// AppRegistry.registerComponent('BadInstagramCloneApp',() => BadInstagramCloneApp); 
// AppRegistry.registerComponent('cameraProject',() => BadInstagramCloneApp); 
module.exports = (BadInstagramCloneApp); 

console.log затем бросает это:

ExceptionsManager.js:62Cannot read property 'Aspect' of undefinedhandleException @ ExceptionsManager.js:62handleError @ InitializeJavaScriptAppEngine.js:120reportFatalError @ error-guard.js:30guardedLoadModule @ require.js:60_require @ require.js:49(anonymous function) @ require-0.js:1executeApplicationScript @ debuggerWorker.js:20onmessage @ debuggerWorker.js:38 
RCTLog.js:38Running application cameraProject ({ 
    initialProps =  { 
    }; 
    rootTag = 1; 
}) 
ExceptionsManager.js:62Module AppRegistry is not a registered callable module (calling runApplication)handleException @ ExceptionsManager.js:62handleError @ InitializeJavaScriptAppEngine.js:120reportFatalError @ error-guard.js:30guard @ MessageQueue.js:48callFunctionReturnFlushedQueue @ MessageQueue.js:107onmessage @ debuggerWorker.js:44 
ExceptionsManager.js:82Unhandled JS Exception: Cannot read property 'Aspect' of undefinedreactConsoleError @ ExceptionsManager.js:82logIfNoNativeHook @ RCTLog.js:38__callFunction @ MessageQueue.js:236(anonymous function) @ MessageQueue.js:108guard @ MessageQueue.js:46callFunctionReturnFlushedQueue @ MessageQueue.js:107onmessage @ debuggerWorker.js:44 
ExceptionsManager.js:82Unhandled JS Exception: Module AppRegistry is not a registered callable module (calling runApplication) 

Если я бросить все, перезагрузить, перестроить используя react-native run-ios, тогда проект строит правильно, но выходит из строя после отображения экрана заставки. Консоль не регистрирует никаких ошибок, но если я выбираю «Пауза на всех пойманных исключений» из Дев инструментов, то это показывает, остановка здесь:

**_nodeUtil.js** 
/** Used to access faster Node.js helpers. */ 
var nodeUtil = (function() { 
    try { 
    return freeProcess && freeProcess.binding('util'); 
    } catch (e) {} 
}()); 

Если я пытаюсь и запустить в пределах от Xcode, а не терминал, то он строит правильно, пуски симулятор, но внутри Xcode открывает cameraProject-> Libraries-> RCTCamera.xcodeproj-> RCTCameraManager.m и основные моменты линии 988:

[self.session commitConfiguration]; <Thread 1: EXC_BAD_ACCESS (code=1, address=0x50) 

Любые идеи по этому поводу?

Answer 1

Если я бросить все, перезагрузить, восстановить с помощью react-native run-ios, то проект строит правильно, но выходит из строя после отображается заставка . Консоль не регистрирует никаких ошибок, но если я выбираю «Pause на всех пойманных исключений» из Дев инструментов, то это показывает остановку здесь:

_nodeUtil.js

Используется для доступа быстрее помощников Node.js.

var nodeUtil = (function() { 
    try { 
     return freeProcess && freeProcess.binding('util'); 
    } catch (e) {} 
}()); 

Я только могу сказать, что это не имеет отношения к вашему вопросу, это всегда бывает. Посмотрите здесь: React Native - debugging exception

Answer 2

У меня такая же проблема с проектом, над которым я работаю. Согласно this gitHub issue, проблема заключается в сочетании новых разрешений камеры iOS 10 и, возможно, также проблемы с поддержкой самой камеры симулятора. Я обнаружил, что если я открою файл xcodeproj непосредственно в XCode, симулятор откроется отлично.Я все еще не нашел постоянного исправления, но запуск сборки из XCode вместо react-native run-ios обходит проблему для меня. Я буду следить, если найду лучший вариант.