ios 如何运行 React-Native 示例？

How to run React-Native Examples?

提问by HelpMeStackOverflowMyOnlyHope

I can't find any instructions on how to install and run one of the other Examples provided in 'https://github.com/facebook/react-native/tree/master/Examples' such as 'https://github.com/facebook/react-native/tree/master/Examples/Movies'.

我找不到有关如何安装和运行“ https://github.com/facebook/react-native/tree/master/Examples”中提供的其他示例之一的任何说明，例如“ https://github”。 com/facebook/react-native/tree/master/Examples/Movies'。

The tutorial only tells you to do

教程只告诉你去做

react-native init AwesomeProject

react-native init AwesomeProject

which grabs 'https://github.com/facebook/react-native/tree/master/Examples/SampleApp'.

它抓住了“ https://github.com/facebook/react-native/tree/master/Examples/SampleApp”。

---

---

If I clone the entire 'react-native' repository, and then run

如果我克隆整个“react-native”存储库，然后运行

npm install
npm start

From the root folder (i.e. '/react-native'), and then open '/react-native/Examples/Movies/Movies.xcodeproj' in Xcode, and Run the project, it seems to build fine. The Simulator comes up, shows a "Movies" intro screen for the app, but then the red screen of death appears with a print out of:

从根文件夹（即'/react-native'），然后在Xcode中打开'/react-native/Examples/Movies/Movies.xcodeproj'，并运行该项目，它似乎构建得很好。模拟器出现，显示应用程序的“电影”介绍屏幕，但随后出现红色死亡屏幕并打印出以下内容：

:0

and Terminal, where 'npm start' is running at the root folder, prints out:

和终端，其中“npm start”在根文件夹中运行，打印出：

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

回答by Arnaud Babol

It should work just by following the Getting Started Tutorial, except that you have to run npm installinside your react-native directory.

它应该只需按照入门教程即可工作，但您必须npm install在 react-native 目录中运行。

Then just run for example the Movie Project with Xcode.

然后只需运行例如带有 Xcode 的电影项目。

If you want to "isolate" the MovieProject or another react-native example project, the easy way is to init a new react native app (react-native init MyAppName) and just copy the JS files from the example project (in the example below the Movie Project) into the new app folder.

如果您想“隔离” MovieProject 或其他 react-native 示例项目，最简单的方法是初始化一个新的 react native 应用程序 ( react-native init MyAppName) 并将示例项目中的 JS 文件（在下面的电影项目示例中）复制到新的应用程序文件夹。

And then don't forget to edit your iOS/AppDelegate.m file.

然后不要忘记编辑您的 iOS/AppDelegate.m 文件。

You have to edit 2 lines:

您必须编辑 2 行：

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

By:

经过：

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

AND

和

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

By:

经过：

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

---

---

回答by Eric Vicenti

First, meet the requirementson the getting started guide

一、满足入门指南上的要求

Then, check out the React Nativerepository and run the following inside it:

然后，查看React Native存储库并在其中运行以下内容：

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

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

If you have errors compiling due to linking errors, removing the derived data may help. Quit Xcode, delete /Users/{you}/Library/Developer/Xcode/DerivedData, and re-open Xcode.

如果由于链接错误导致编译错误，删除派生数据可能会有所帮助。退出 Xcode，删除/Users/{you}/Library/Developer/Xcode/DerivedData，然后重新打开 Xcode。

回答by azibi

Also, you can run the android version of the UIExplorer app by running the command:

此外，您可以通过运行以下命令来运行 UIExplorer 应用程序的 android 版本：

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

or this:

或这个：

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

for the movies example (should be run on the react-native folder).

对于电影示例（应该在 react-native 文件夹上运行）。

Also, you could run the gradle daemon to speed up the build time for Android.

此外，您可以运行 gradle 守护程序来加快 Android 的构建时间。

回答by Niccolò Passolunghi

You have to install node.js in your Terminal with

您必须在终端中安装 node.js

brew install node

ReactNative use Node.js to build the Javascript code inside the project.

ReactNative 使用 Node.js 在项目中构建 Javascript 代码。

Then you need Watchman, a file watcher from Facebook with

然后你需要 Watchman，一个来自 Facebook 的文件观察者

brew install watchman

React Native use Watchman to rebuild your code when there's a change in it.

当你的代码发生变化时，React Native 使用 Watchman 来重建你的代码。

The final thing is to install and run node with a Terminal window in the react-native folder.

最后一件事是在 react-native 文件夹中安装和运行带有终端窗口的节点。

npm install
npm start

Now you can open a project from the react-native/Examples folder in Xcode, then build and run it.

现在您可以从 Xcode 中的 react-native/Examples 文件夹中打开一个项目，然后构建并运行它。

回答by Rohit Goyal

1) Open your terminal and cd to the specific example you want to run cd home/XYZ/react-native-master/Examples/UIExplorer

1) 打开你的终端并 cd 到你想要运行的特定示例 cd home/XYZ/react-native-master/Examples/UIExplorer

2) run npm install

2) 运行 npm install

3) run npm start

3) 运行 npm start

4) Open the example in Xcode and run it from there It should work fine.

4) 在 Xcode 中打开示例并从那里运行它应该可以正常工作。

PS: It was so simple but a lot of answers mislead me too.

PS：这很简单，但很多答案也误导了我。

回答by Kazuki Kimoto

1. brew update
2. brew install node
3. brew upgrade node (if u already installed)
4. brew install watchman
5. npm install -g react-native-cli
6. react-native init [name ur app] --version 0.24.0(depends on which version u want to use, if it didn't work use below) (6). react-native init [name ur app] --verbose
7. cd [name ur app]
8. open .
9. npm start
10. atom . (if u installed atom)

1. 酿造更新
2. brew安装节点
3. brew upgrade node (如果你已经安装了)
4. 酿造安装守望者
5. npm install -g react-native-cli
6. react-native init [name ur app] --version 0.24.0（取决于你想使用哪个版本，如果它不起作用，请在下面使用）（6）。react-native init [name ur app] --verbose
7. cd [命名你的应用程序]
8. 打开 。
9. 启动
10. 原子。（如果你安装了原子）

回答by itsmcgh

Just wanted to update this for people just trying to run an existing react-native project/app like me:

只是想为那些像我这样试图运行现有的 react-native 项目/应用程序的人更新这个：

In Terminal:

在终端：

1. npm install
2. npm start (should open a separate window to run react package manager or it may use the existing terminal window, if that is the case you will need to open a new terminal window to type the command for step 3)
3. react-native run-ios/react-native run-android

1. 安装
2. npm start （应该打开一个单独的窗口来运行 react 包管理器，或者它可以使用现有的终端窗口，如果是这种情况，您将需要打开一个新的终端窗口来键入第 3 步的命令）
3. react-native run-ios/react-native run-android

**you may want to run npm update -g (while in the react native folder) to ensure all the npm packages are up to date before running npm install

**您可能想要运行 npm update -g（在 react native 文件夹中）以确保所有 npm 包在运行 npm install 之前都是最新的

回答by TGH

Here is a step by step tutorial for creating a simple application.

这是创建简单应用程序的分步教程。

1) First download the cli tool

1）首先下载cli工具

2) npm run start

2) npm 运行开始

3) start the app in the xcode IOS simulator.

3）在xcode IOS模拟器中启动app。

Tutorial here: http://www.syntaxsuccess.com/viewarticle/553844b55bbbb6000031f0f9

教程在这里：http: //www.syntaxsuccess.com/viewarticle/553844b55bbbb6000031f0f9

回答by Timo

On Windows 10 I had to do adb shell am start -n com.facebook.react.movies/.MoviesActivityto get the examples running. (make sure ANDROID_SDK\platform-toolsis in path or run command with absolute path)

在 Windows 10 上，我必须adb shell am start -n com.facebook.react.movies/.MoviesActivity让示例运行。（确保ANDROID_SDK\platform-tools在路径中或使用绝对路径运行命令）

So step by step I had to do:

所以我必须一步一步地做：

cd react-native

./gradlew :Examples:Movies:android:app:installDebug

adb shell am start -n com.facebook.react.movies/.MoviesActivity

./packager/packager.sh

or

或者

./gradlew :Examples:UIExplorer:android:app:installDebug

adb shell am start -n com.facebook.react.uiapp/.UIExplorerActivity

./packager/packager.sh