如何运行 React-Native 示例？

Question

我找不到任何关于如何安装和运行“https://github.com/facebook/react-native/tree/master/Examples' such as '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'，然后运行项目，似乎构建良好。模拟器出现，显示应用程序的 "Movies" 介绍屏幕，但随后出现红色死亡屏幕并打印出：

:0

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

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

Answer 1

您必须使用

在您的终端中安装 node.js

brew install node

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

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

brew install watchman

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

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

npm install
npm start

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

Answer 2

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

然后运行例如 Xcode 的电影项目。

如果你想要 "isolate" 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 3

首先，了解入门指南requirements

然后，检查 React Native 存储库和其中运行以下内容：

npm install
open Examples/Movies/Movies.xcodeproj

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

Answer 4

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

1) 首先下载cli工具

2) npm 运行开始

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

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

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) 打开您的终端并 cd 到您想要的特定示例运行 cd home/XYZ/react-native-master/Examples/UIExplorer

2) 运行 npm 安装

3) 运行 npm 开始

4) 从那里打开 Xcode 和运行中的示例它应该工作正常。

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

Answer 7

在 Windows 10 我必须做 adb shell am start -n com.facebook.react.movies/.MoviesActivity 才能得到示例运行ning。（确保 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 8

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

Answer 9

只是想为像我这样运行现有的反应本机 project/app 的人更新这个：

在终端中：

npm 安装
npm start（应该打开一个单独的 window 到运行反应包管理器或者它可以使用现有的终端 window，如果是这种情况，你将需要打开一个新终端 window 输入步骤 3)
react-native run-ios/react-native 运行-android

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

如何运行 React-Native 示例？

How to run React-Native Examples?

ios

facebook

reactjs

react-native

如何 运行 React-Native 示例？

How to run React-Native Examples?

ios

facebook

reactjs

react-native

如何运行 React-Native 示例？