如何运行 React-Native 示例？

Question

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

Answer 1

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

在终端：

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

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

Answer 2

1. 酿造更新
2. brew 安装节点
3. brew 升级节点（如果你已经安装）
4. brew install watchman
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. npm 开始
10. 原子。 （如果你安装了 atom）

Answer 3

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

所以我必须一步一步做：

cd react-native

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

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

./packager/packager.sh

或

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

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

./packager/packager.sh

Answer 4

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

2) 运行 npm 安装

3) 运行 npm start

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

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

Answer 5

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

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

或者这个：

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

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

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

Answer 6

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

1) 先下载cli工具

2) npm 运行开始

3) 在 xcode IOS 模拟器中启动应用。

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

Answer 7

首先，与入门指南上的requirements 见面

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

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

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

Answer 8

它应该只需要遵循Getting Started Tutorial 就可以工作，除了你必须在你的 react-native 目录中运行npm install。

然后只需使用 Xcode 运行例如 Movie Project。

如果你想“隔离”MovieProject 或其他 react-native 示例项目，简单的方法是初始化一个新的 react native 应用程序 (react-native init MyAppName) 并从示例项目中复制 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];

---

Answer 9

你必须在你的终端中安装 node.js

brew install node

ReactNative 使用 Node.js 构建项目内部的 Javascript 代码。

那么你需要 Watchman，一个来自 Facebook 的文件观察器

brew install watchman

React Native 使用 Watchman 在代码发生变化时重建代码。

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

npm install
npm start

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