web-dev-qa-db-ja.com

React-Nativeの例を実行する方法は？

次のような「 https://github.com/facebook/react-native/tree/master/Examples 」で提供されている他のサンプルの1つをインストールして実行する方法についての説明が見つかりません' https://github.com/facebook/react-native/tree/master/Examples/Movies '。

チュートリアルでは、行うことのみが指示されています

react-native init AwesomeProject

「 https://github.com/facebook/react-native/tree/master/Examples/SampleApp 」を取得します。

'react-native'リポジトリ全体を複製してから実行する場合

npm install
npm start

ルートフォルダー（つまり、 '/ react-native'）から、Xcodeで '/react-native/Examples/Movies/Movies.xcodeproj'を開き、プロジェクトを実行すると、正常にビルドされているようです。シミュレーターが起動し、アプリの「ムービー」イントロ画面が表示されますが、その後、死の赤い画面が印刷されて表示されます：

:0

「npm start」がルートフォルダーで実行されているターミナルでは、次のように出力されます。

Error: EISDIR, read
    at Error (native)
[02:35:02] <START> request:/Examples/Movies/MoviesApp.includeRequire.runModule.bundle
iosfacebookreactjsreact-native
13
HelpMeStackOverflowMyOnlyHope

Getting Started Tutorial に従うだけで動作するはずですが、npm install反応ネイティブディレクトリ内。

次に、たとえばXcodeでMovie Projectを実行します。

MovieProjectまたは別の反応ネイティブのサンプルプロジェクトを「分離」したい場合、簡単な方法は、新しい反応ネイティブアプリを初期化することです（react-native init MyAppName）サンプルプロジェクト（Movie Projectの下の例）からJSファイルを新しいアプリフォルダーにコピーします。

そして、iOS/AppDelegate.mファイルを編集することを忘れないでください。

2行を編集する必要があります。

jsCodeLocation = [NSURL URLWithString:@"http:/localhost:8081/index.ios.bundle"];

沿って：

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/MoviesApp.bundle"];

そして

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"MyAppName"
                                               launchOptions:launchOptions];

沿って：

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"MoviesApp"
                                               launchOptions:launchOptions];
20
Arnaud Babol

最初に、入門ガイドの 要件 を満たします

次に、 React Native リポジトリをチェックアウトし、その中で以下を実行します。

  1. npm install
  2. open Examples/Movies/Movies.xcodeproj

リンクエラーが原因でコンパイルエラーが発生した場合は、派生データを削除すると役立つ場合があります。 Xcodeを終了し、/Users/{you}/Library/Developer/Xcode/DerivedDataを削除し、Xcodeを再度開きます。

6
Eric Vicenti

また、次のコマンドを実行して、UIExplorerアプリのAndroidバージョンを実行できます。

./gradlew :Examples:UIExplorer:Android:app:installDebug
./packager/packager.sh

またはこれ：

./gradlew :Examples:Movies:Android:app:installDebug
./packager/packager.sh

映画の例の場合（react-nativeフォルダーで実行する必要があります）。

また、gradleデーモンを実行して、Androidのビルド時間を短縮できます。

4
azibi

ターミナルにnode.jsをインストールする必要があります

brew install node

ReactNativeはNode.jsを使用して、プロジェクト内でJavascriptコードをビルドします。

次に、FacebookのFile WatcherであるWatchmanが必要です。

brew install watchman

React Nativeは、変更があった場合にWatchmanを使用してコードを再構築します。

最後に、react-nativeフォルダーにターミナルウィンドウを使用してノードをインストールして実行します。

npm install
npm start

これで、Xcodeのreact-native/Examplesフォルダーからプロジェクトを開き、ビルドして実行できます。

3
nicopasso

1）ターミナルを開き、cd home/XYZ/react-native-master/Examples/UIExplorerを実行する特定のサンプルに移動します

2）npm installを実行します

3）npm startを実行します

4）Xcodeでサンプルを開き、そこから実行します。正常に動作するはずです。

PS：それはとても簡単でしたが、多くの答えも私を誤解させます。

2
Rohit Goyal
  1. 醸造アップデート
  2. 作成インストールノード
  3. brew upgradeノード（uが既にインストールされている場合）
  4. ウォッチマンを醸造する
  5. npm install -g react-native-cli
  6. react-native init [name ur app] --version 0.24.0（使用したいバージョンに依存します。以下で使用できなかった場合）（6）。 react-native init [アプリ名] --verbose
  7. cd [アプリ名]
  8. 開いた 。
  9. npm start
  10. 原子 。 （アトムがインストールされている場合）
1
Kazuki Kimoto

私のような既存の反応ネイティブのプロジェクト/アプリを実行しようとしている人々のためにこれを更新したかっただけです：

ターミナルで：

  1. npmインストール
  2. npm start（別のウィンドウを開いてリアクティブパッケージマネージャーを実行するか、既存のターミナルウィンドウを使用する必要がある場合は、新しいターミナルウィンドウを開いて手順3のコマンドを入力する必要があります）
  3. react-native run-ios/react-native run-Android

** npm update -g（react nativeフォルダー内で）を実行して、npm installを実行する前にすべてのnpmパッケージが最新であることを確認することができます。

0
itsmcgh

簡単なアプリケーションを作成するためのステップバイステップのチュートリアルを次に示します。

1）最初にcliツールをダウンロードします

2）npm run start

3）xcode IOSシミュレーターでアプリを起動します。

チュートリアルはこちら： http://www.syntaxsuccess.com/viewarticle/553844b55bbbb6000031f0f9

0
TGH