这一系列的教程写于 F8 2016 app 开发期间,为的是用简单的文字来介绍 React Native 及其开源生态。教程于 2016 年 4 月 13 号发布到 makeitopen.com,内容翔实很有指导意义, 看了之后花了周六日两天时间,翻译成中文,方便大家学习。

你可以从 iOS App Store, 或者从 Google Play Store 下载安装 F8。

如果你在阅读本教程时,你想在本地运行 App,你可根据以下简要的步骤进行设置:

如果你是在 Windows 或者 Linux 上进行设置,请参考这个 React Native Android 版本在 Windows 和 Linux 上的 相关支持

如果还没配置过 React Native 的,可以看看这个 React Native 配置和起步

需求

开始之前,请需要安装这些前置依赖:

  1. React Native
  2. CocoaPods 1.0+ (只有 iOS 需要)
  3. MongoDB (本地运行 Parse Server 需要)

配置

1. Clone 项目

1
2
$ git clone https://github.com/fbsamples/f8app.git
$ cd f8app

2. 安装依赖 (npm v3+):

1
2
$ npm install
$ (cd ios; pod install)        # 只有 ios 需要

3. 确认 MongoDB 是已经运行的:

1
$ lsof -iTCP:27017 -sTCP:LISTEN

如果你要使用外部的 MongoDB,请设置 DATABASE_URI

1
$ export DATABASE_URI=mongodb://example-mongo-hosting.com:1337/my-awesome-database

4. 启动 Parse/GraphQL:

1
$ npm start

5. 导入示例数据 (本地的 Parse Server 应该已经在运行了):

1
$ npm run import-data

打开这些链接,确保一切正常:

6. 运行 Android:

1
2
3
$ react-native run-android
$ adb reverse tcp:8081 tcp:8081   # 使用 adb 端口代理,确保设备可以访问 Packager 和 GraphQL server
$ adb reverse tcp:8080 tcp:8080

7. 运行 iOS:

1
$ react-native run-ios