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 ランタイム環境 (ビルド 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

すべてが正常に機能します。「使用法」セクションに。GitHub からコードをコピーして、BadInstagramCloneApp.js というモジュールに貼り付けます。次に、それを index.ios.js に basic でインポートしimport 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.acameraProject->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);

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)

これに関するアイデアはありますか？

4

2 に答える 2

0

私が取り組んでいるプロジェクトで同じ問題が発生しています。この gitHub の問題によると、問題は新しい iOS 10 カメラのアクセス許可の組み合わせであり、シミュレーターのカメラ サポート自体の問題でもある可能性があります。XCodeでxcodeprojファイルを直接開くと、シミュレーターが正常に開くことがわかりました。私はまだ永続的な修正を見つけていませんがreact-native run-ios、問題を回避する代わりに XCode からビルドを実行しています。より良いオプションが見つかったら、フォローアップします。

于 2017-01-03T01:52:34.630 に答える
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 に答える