如何运行 React-Native 示例？

Posted 2023-02-16

【中文标题】如何运行 React-Native 示例？

【英文标题】：How to run React-Native Examples?

【发布时间】：2015-06-02 08:20:25

【问题描述】：

我找不到有关如何安装和运行“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

【参考方案1】：

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

在终端：

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

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

【参考方案2】：

酿造更新 brew 安装节点 brew 升级节点（如果你已经安装） brew install watchman npm install -g react-native-cli react-native init [name ur app] --version 0.24.0（取决于您要使用的版本，如果它不起作用，请在下面使用） (6)。 react-native init [name ur app] --verbose cd [给你的应用命名] 打开。 npm 开始 原子。 （如果你安装了 atom）

【参考方案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

【参考方案4】：

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

2) 运行 npm 安装

3) 运行 npm start

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

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

【参考方案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 的构建时间。

【讨论】：

英文句子应以“.”、“?”结尾要么 ”！”。它不是聊天室。但是你的内容是值得的，所以我修复了它并投票了。如果下次我只需要做第二次，我会更开心:-)。

@peterh 我会更加注意这些细节，谢谢。

【参考方案6】：

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

1) 先下载cli工具

2) npm 运行开始

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

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

【参考方案7】：

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

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

npm install open Examples/Movies/Movies.xcodeproj

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

【讨论】：

我用UIExplorer 尝试了这个，它成功构建但我遇到了一个错误：Could not find source file at Examples/UIExplorer/UIExplorerApp.ios.js。我该如何解决这个问题？

我通过在npm install 之后运行npm start 解决了我的问题，然后打开xcode 项目。

【参考方案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];

---

【讨论】：

我知道这个答案比较老，也许我的问题很愚蠢，但是“隔离应用程序”是什么意思？react-native init 和 npm install 有什么区别？

【参考方案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 文件夹中打开一个项目，然后构建并运行它。

【讨论】：

在 /Examples/Moveis 中执行“npm start”我得到：npm ERR！达尔文 14.1.0 npm 错误！ argv "node" "/usr/local/bin/npm" "start" npm ERR!节点 v0.12.1 npm 错误！ npm v2.7.3 npm 错误！路径 /Users/.../React/Examples/Movies/package.json npm ERR！代码 ENOENT npm 错误！ errno -2 npm 错误！ enoent ENOENT，打开 '/Users/.../React/Examples/Movies/package.json' npm ERR！ enoent 这很可能不是 npm 本身的问题 npm ERR！ enoent 并且与 npm 无法找到文件有关。 npm 错误！ enoent npm 错误！请在任何支持请求中包含以下文件：npm ERR！ /Users/.../npm-debug.log

是的，我的错。您必须在 react-native 文件夹中运行 npm install 和 npm start。我编辑了我的答案

所以我想我又近了一步。我从 GitHub 下载了整个“react-native-master”文件夹。在根目录运行“npm install”和“npm start”，然后在 Xcode 中打开 /react-native-master/Examples/Movies 并运行它，没有构建错误。现在我得到了红屏死机，唯一的消息是“：0”。终端打印出：错误：EISDIR，读取错误（本机） 请求：/Examples/Movies/MoviesApp.includeRequire.runModule.bundle

我的 react native 文件夹是“react-native”，其中没有“master”名称。我用终端克隆了 git repo。试试这个方法，让我知道。

克隆 git repo 时的行为完全相同。运行该项目，在模拟器中我得到一个介绍屏幕，上面写着“电影”和 Facebook 版权信息，然后一两秒后出现了 Red Screen of Death。终端打印出 Error: EISDIR, read at Error (native) [03:24:33] request:/Examples/Movies/MoviesApp.includeRequire.runModule.bundle