Question

TL; DR：不适用于IOS10模拟器。然而，IOS9似乎很好。

我一直在努力实施L Wansbrough的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版本＆＃34; 1.8.0_112＆＃34; Java（TM）SE运行时环境（版本1.8.0_112-b16） Java HotSpot（TM）64位服务器VM（版本25.112-b16，混合模式）

所以要求看起来很稳固。现在：

react-native run-ios

成功 - 应用程序在模拟器中运行，一切正常。现在我尝试按照文档安装react-native-camera。首先，我的模拟器正在运行的iOS10有一个新的需求部分。您需要将有关摄像头的隐私密钥添加到Info.plist文件中。这似乎已从源代码的示例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

一切仍然有效。在＆＃39; Usage＆＃39;部分。我要将代码从GitHub复制并粘贴到一个名为BadInstagramCloneApp.js的模块中，然后我将其导入到带有基本import BadInstagramCloneApp from './BadInstagramCloneApp';的index.ios.js中，我们＆＃39 ;用<BadInstagramCloneApp />将其粘贴在主体中。

刷新模拟器： Error

好吧，所以退出模拟器，关闭终端并重新运行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文件。它在cameraProject-＆gt; Build Phases-＆gt; Link Binary with Libraries部分中也已经libRCTCamera.a了。页眉搜索路径中包含正确的项目，并且它们都标记为“递归”。按照说明。然后CMD + R来运行项目。新的模拟器加载，看起来像它开始工作然后用相同的红色屏幕摔倒。退出Xcode，再次从终端运行react-native run-ios（表示构建成功），它仍然给出与上面相同的错误。

我已经尝试过我能想到的每一种排列。我尝试过从示例文件中复制代码，我已经尝试过该版本的旧版本，并且我已经在线阅读了一些应该启动react-native-camera的教程同样。除了红屏或应用程序崩溃之外，我尝试过的任何事情都没有结束。

连连呢？我想要做的就是让用户拍照，然后将该照片作为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-＆gt; Libraries-＆gt; RCTCamera.xcodeproj-＆gt; RCTCameraManager.m并突出显示988行：

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

有关于此的任何想法吗？

Answer 1

如果我退出所有内容，请使用react-native run-ios重新加载，重建，然后项目正确构建，但在启动画面后崩溃被展示。控制台不记录任何错误，但如果我选择“暂停” 在开发工具的所有捕获的异常中，它显示停止这里：

_nodeUtil.js

用于访问更快的Node.js帮助程序。

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

我可以告诉你，这与你的问题无关，它总会发生。看这里： React Native - debugging exception

Answer 2

我正在处理与我正在进行的项目相同的问题。根据{{3}}，问题是新的iOS 10相机权限的组合，也可能是模拟器相机支持本身的问题。我发现如果我直接在XCode中打开xcodeproj文件，模拟器打开就可以了。我仍然没有找到永久修复但是从XCode而不是react-native run-ios运行构建为我绕过了问题。如果我找到更好的选择，我会跟进。

在React Native

2 个答案: