iosでReact Native（0.43.4）のココアポドを使用する適切な方法は何ですか？

Question

私はネイティブのiosライブラリ用のcocoapodsを使って反応ネイティブプロジェクトを設定しようとしているいくつかのポストを掘り下げましたが、私はAppDelegate.mファイルの#import <React/RCTBundleURLProvider.h>ステートメントのファイルが見つからなくなったため必然的にエラーになります。

反応ネイティブのココアポッドを使用する適切な方法は何ですか？この記事の時点で、現在のRNバージョンは0.43.4で、Xcode 8.2.1を使用しています。私は間違っているかもしれないどこ

これは私のプロセスは、興味があった：

1）の端末では、私が使用して新しいプロジェクトを作成react-native init TestProject

2）私は、そのプロジェクトのIOSディレクトリにpod init実行

3）私は私のpodFileに依存関係を追加し、インストールプロセスが成功したpod install

4）実行されますが、私は警告私の目標override the 'OTHER_LDFLAGS」を参照しますXcodeのリンカーフラグに$(inherit)を使用することをお勧めします。だから、this SO postに基づい

5）私は$(inherited)そうでない場合は空だった> TestProject> BuildSettings>リンク>その他のリンカフラグプロジェクトに追加します。 $(inherited)がすでにターゲット>テストプロジェクト>ビルド設定>リンク>その他のリンカフラグおよびプリプロセッサマクロにも存在することを確認して確認しました。私はを参照してください。この時点で

6）は/ RCTBundleURLProvider.hは、私は、端末の実行npm installに戻っnode modulesディレクトリを削除してみてくださいthis SO postに基づいてAppDelegate.m

7）で#import <React/RCTBundleURLProvider.h>文でエラーをファイルが見つからない反応します完了時には'react-native upgrade'となります。 AppDelegate.mとproject.pbxprojのファイルを置き換えるかどうか聞いてきたら、私は「はい」と答えます。

8）戻るXcodeで、私は、私はちょうどきれいなXcodeプロジェクトからスタートして、全体のプロセスを作る<React/RCTBundleURLProvider.h>

Answer 1

をインポートする手順6からエラーを持っているまだ私のビルドをきれいけど。通常、私は単純にRNアプリケーションを作成し、取り出してからcocoapods iosの部分に翻訳します。 主にRNドキュメントに基づいています。http://facebook.github.io/react-native/docs/0.51/integration-with-existing-apps.html

So環境：macOS Sierra、Xcode 9.2、RN 0.510

プロジェクト名：MyAppを

それを参照して、ファイル名を指定して実行

言語のObjective-C、商品名 "MyAppの"、 'シングルビューアプリケーション' テンプレートから、新しいXcodeプロジェクトを作成します

• を準備
• cd MyApp、mkdir ios、mv MyApp* ios（IOSのサブフォルダにファイルを関連するすべてのIOSを動かす）

の作品10の

インストールNPMの依存関係

あなたは

{ 
    "name": "MyApp", 
    "version": "0.0.1", 
    "private": true, 
    "scripts": { 
    "start": "node node_modules/react-native/local-cli/cli.js start" 
    }, 
    "dependencies": { 
    "react": "16.0.0", 
    "react-native": "0.51.0" 
    }, 
    "devDependencies": { 
    "babel-jest": "22.0.4", 
    "babel-preset-react-native": "4.0.0" 
    } 
} 

実行npm install

Seupはcocoapodsプロジェクト（非常に基本的な）のルートフォルダにpackage.jsonを作成

• cd ios
• pod init （Podfileを生成する）
• 宣言あなたはRNの機能を削除/含めるようにsubspecsを反応させるの追加/削除することができます

pod 'React', :path => '../node_modules/react-native', :subspecs => [ 
    'Core', 
    'CxxBridge', 
    'RCTAnimation', 
    'RCTBlob', 
    'RCTText', 
    'RCTNetwork', 
    'RCTWebSocket', 
    'RCTImage', 
    'RCTLinkingIOS', 
    'DevSupport', 
    ] 
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' 
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' 
pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec' 
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 

をターゲットのMyAppにPodfileで依存関係を反応させ、これはRNコンポーネント理由ではない完全に独立したハードプロセスです。

• pod install、
• open MyApp.xcworkspace &実行を構築（プロジェクトにポッドを統合し、MyApp.xcworkspaceを作成します、それはアプリケーションをコンパイルするために使用されなければならない）、アプリはまだ

埋め込みRNルートビューを動作するはずです

あなたはこのスニペットをAppDelegate.m置き換えます

#import "AppDelegate.h" 

#import <React/RCTBundleURLProvider.h> 
#import <React/RCTRootView.h> 
#if RCT_DEV 
#import <React/RCTDevLoadingView.h> 
#endif 

@implementation AppDelegate 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 
    RCTBundleURLProvider* provider = [RCTBundleURLProvider sharedSettings]; 
    NSURL* jsCodeLocation = [provider jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 

    RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions]; 
#if RCT_DEV 
    [bridge moduleForClass:[RCTDevLoadingView class]]; 
#endif 
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MyApp" initialProperties:@{}]; 
    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 
    UIViewController *rootViewController = [UIViewController new]; 
    rootViewController.view = rootView; 
    self.window.rootViewController = rootViewController; 
    [self.window makeKeyAndVisible]; 
    return YES; 
} 

@end 

を

• が

<key>NSAppTransportSecurity</key> 
<dict> 
    <key>NSExceptionDomains</key> 
    <dict> 
     <key>localhost</key> 
     <dict> 
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> 
      <true/> 
     </dict> 
    </dict> 
</dict> 

• のInfo.plistにATS例外（またはMyAppには、httpでパッケージャサーバーに接続することができません）Simulatorでコンパイル&実行を追加し、次のメッセージと赤い画面が表示されます"バンドルURLはありません。「（なしパッケージャサーバが何のコンパイルjsbundleが存在しない&を実行していないので、それはある）

Javascriptの一部

は、（それがRNテンプレートからです）このコードでMyApp/index.jsを作成します。

import { AppRegistry } from 'react-native'; 
import App from './App'; 
AppRegistry.registerComponent('MyApp',() => App); 

はMyApp/App.jsを作成します。

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

export default class App extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! 
     </Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
}); 

• ルートプロジェクトフォルダ（MyApp）
• のXcodeから実行アプリからスタートパッケージャnpm start、あなたがロードインジケータが表示されるはずですし、その後RNがで画面をレンダリングされた「ネイティブを反応させるためにようこそ！」

パッケージャ

• また、パッケージ化されたjsをパッケージバンドルmain.jsbundleに埋め込むためにpackagerビルドステップを追加して、packager dev serverなしで実行できるようにする必要があります。

このコンテンツを構築段階のターゲットのMyAppにスクリプトステップを追加します。

export NODE_BINARY=node 
../node_modules/react-native/scripts/react-native-xcode.sh 

これは私のために作品を繰り返します。