2

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 版本“1.8.0_112” Java(TM) SE Runtime Environment (build 1.8.0_112-b16) Java HotSpot(TM) 64-Bit Server VM (build 25.112-b16，混合模式)

所以要求看起来很可靠。现在：

react-native run-ios

成功 - 应用程序在模拟器中运行，一切正常。现在我尝试按照文档安装 react-native-camera。首先，有一个关于我的模拟器正在运行的 iOS10 的新要求部分。您需要将有关相机的隐私密钥添加到 Info.plist 文件中。这似乎已从源代码的示例信息文件中省略，并且文档没有所需的代码。我已经挖掘并添加了以下内容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 并使用 basicimport BadInstagramCloneApp from './BadInstagramCloneApp';将其粘贴到主体中<BadInstagramCloneApp />。

刷新模拟器： 错误

好的，所以退出模拟器，关闭终端并重新运行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在 cameraProject->Build Phases->Link Binary with Libraries 部分。标头搜索路径中包含正确的项目，并且根据说明将它们都标记为“递归”。然后 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);

坏InstagramCloneApp.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)

对此有什么想法吗？

4

2 回答 2

0

如果我退出所有内容，重新加载，使用重建react-native run-ios，那么项目会正确构建，但在显示初始屏幕后崩溃。控制台不记录任何错误，但如果我从开发工具中选择“暂停所有捕获的异常”，那么它会在此处显示停止：

_nodeUtil.js

用于访问更快的 Node.js 助手。

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

我只能告诉你，这与你的问题无关，它总是会发生。看这里： React Native - 调试异常

于 2016-11-25T22:07:41.997 回答
0

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

于 2017-01-03T01:52:34.630 回答