如何运行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目录中运行之外,它应该只遵循入门教程npm install.

然后只运行带有Xcode的Movie Project.

如果你想"隔离"MovieProject或另一个本机反应示例项目,那么简单的方法就是初始化一个新的react native app(react-native init MyAppName)并将示例项目中的JS文件(在Movie Project下面的示例中)复制到新的app文件夹.

然后不要忘记编辑您的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 2

首先,满足入门指南的要求

然后,查看React Native存储库并在其中运行以下命令:

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

如果由于链接错误而编译错误,则删除派生数据可能会有所帮助.退出Xcode,删除/Users/{you}/Library/Developer/Xcode/DerivedData并重新打开Xcode.