React Native实战之运行官方项目f8app(适配IOS_Mac)

F8 App 简介

Facebook 在 2016 年的 F8 大会上开源了 F8 App，这是使用React Native开发的，毫无疑问这是一个特别棒的React Native的学习模板。

项目地址：https://github.com/fbsamples/f8app

运行 F8 App 需要React Native、Redux、Relay、GraphQL等。

Facebook 在 F8 开发者大会上宣布他们用 React Native 开发了 F8 开发者大会的官方应用。他们不仅仅开发了应用（可从 App Store 和 Google Play 下载），还设置了一个官方网站：http://makeitopen.com/ ，开源了官方应用的代码，并且还写了如何开发的教程。这将是开发者学习 React Native 非常好的教程。

教程地址：https://github.com/pockry/Building-the-F8-2016-App-CN#rd

对项目的整体了解：http://f8-app.liaohuqiu.net/

搭建环境要求

• Node
• React Native：iOS和Android的配置环境
• MongoDB
• Mac上运行iOS的Demo需要：Xcode 7.3+、CocoaPods(iOS项目的包管理工具)
• Windows上运行Android的Demo需要：Gradle、Android SDK

项目地址：git clone https://github.com/fbsamples/f8app.git

MAC 环境运行 F8App

安装依赖（进入f8app目录下npm install）

npm 版本必须要求 v3+

Mac下可以安装n模块

npm install -g n

n模块是专门用来管理node.js的版本的，使用命令n stable即可更新 Node

安装依赖（进入f8app/ios目录下pod install --no-repo-update）

被墙，执行pod install无法成功！

pod CocoaPods

CocoaPods是一个用来帮助我们管理第三方依赖库的工具。它可以解决库与库之间的依赖关系，下载库的源代码，同时通过创建一个Xcode的workspace来将这些第三方库和我们的工程连接起来，供我们开发使用。

使用CocoaPods的目的是让我们能自动化的、集中的、直观的管理第三方开源库。

升级ruby环境 更新ruby的淘宝镜像 安装Cocoapods

sudo gem install cocoapods

通过rvm(ruby version manager)

执行pod install命令
出现Setting up CocoaPods master repo，说明Cocoapods在将它的信息下载到~/.cocoapods里。cd 到该目录里，用du -sh *命令来查看文件大小，每隔几分钟查看一次，大小会变化

其实真正慢的原因并不在pod命令，而是在于github上的代码库访问速度慢，那么就知道真正的解决方案就是要加快git命令的速度。
我使用Shadowsocks代理，默认代理端口为1080，配置好代理之后去终端输入git配置命令，命令如下

配置代理：git config --global http.https://github.com.proxy socks5://127.0.0.1:1080
取消代理：git config --global --unset http.https://github.com.proxy

执行完后 会报错：

ng dependencies
Fetching podspec for `CodePush` from `../node_modules/react-native-code-push`
Fetching podspec for `React` from `../node_modules/react-native`
Fetching podspec for `react-native-fbsdk` from `../node_modules/react-native-fbsdk/iOS`
[!] No podspec found for `react-native-fbsdk` in `../node_modules/react-native-fbsdk/iOS`

解决方法：到目录f8app/node_modules下删除react-native-fbsdk，然后在目录f8app/下npm install react-native-fbsdk --save，可能有一大推警告
然后在目录f8app/ios/下pod install会安装那些依赖

提示：[!] Please close any current Xcode sessions and use `F8v2.xcworkspace` for this project from now on.
Sending stats
Pod installation complete! There are 13 dependencies from the Podfile and 7
total pods installed.

安装MongoDB并确认其运行正常

To install the MongoDB binaries that have TLS/SSL support, issue the following from a system shell:
brew install mongodb --with-openssl

查看：brew info mongo
启动MongoDB：brew services start mongodb
确认：lsof -iTCP:27017 -sTCPISTEN 端口监听

Start Parse / GraphQL servers

都是f8app目录下运行：npm start与react-native start（官方少了这步骤）

导入示例数据（在f8app目录下）

$ npm run import-data
$ mongo
MongoDB shell version: 3.2.8
connecting to: test
>
> show databases
admin  (empty)
dev    0.078GB
local  0.078GB
> use dev
switched to db dev
> show collections
Agenda
FAQ
Maps
Notification
Page
Speakers
Survey
_Installation
_SCHEMA
system.indexes
> db.FAQ.find()

再次确保正常并且有数据

Parse Dashboard: http://localhost:8080/dashboard
Graph*i*QL: http://localhost:8080/graphql?query=query+%7B%0A++schedule+%7B%0A++++title%0A++++speakers+%7B%0A++++++name%0A++++++title%0A++++%7D%0A++++location+%7B%0A++++++name%0A++++%7D%0A++%7D%0A%7D

运行在ios设备上

在f8app目录下：react-native run-ios

或使用Xcode 7.3以上打开f8app/ios/目录下的F8v2.xcworkspace