f8app

本文主要探讨的是如何编译和运行 f8app.

介绍

f8app 是 Facebook 开源的, 基于 React Native 开发的一款 App.

代码基本都是 js 的, 很少有原生的代码.

f8app 是借鉴和学习 React Native 的上好资料.

原文介绍:

This is the entire source code of the official F8 app of 2016, available on Google Play and the App Store.

项目开源地址: Github

编译运行

环境要求

安装和配置了 React Native 开发环境.
Xcode 7.3 +
CocoaPods (only for iOS) 1.0+
MongoDB (needed to run Parse Server locally)

源码构建

下载源码

1	git clone https://github.com/fbsamples/f8app.git

下载完成后, 进入下载的 f8app 目录

1 2	cd f8app npm install

如果是 iOS 的话, 需要进入 iOS 目录执行 pod install

1 2	cd ios pod install

在项目 f8app 目录下运行:

npm start

打开浏览器输入地址 http://localhost:8080, 可以看到 graphql 的界面.

安装 MongoDB

使用 Homebrew 来安装.

1	brew install mongodb

导入数据

导入例子数据.

注意:
在源码的路径即 ~/yourpath/f8app 下面执行, 下面操作没有特殊说明都是在源码根目录下面操作.
你可以多开几个终端端口来进行操作.

1	npm run import-data

导入例子数据, 会报下面的错误:

error: Uncaught internal server error. { [MongoError: connect ECONNREFUSED 127.0.0.1:27017]
name: 'MongoError',
message: 'connect ECONNREFUSED 127.0.0.1:27017' } Error: connect ECONNREFUSED 127.0.0.1:27017
at Object.exports._errnoException (util.js:893:11)
at exports._exceptionWithHostPort (util.js:916:20)
at TCPConnectWrap.afterConnect as oncomplete

需要安装 mongodb-runner

安装方法如下:

1	sudo npm install -g parse-server mongodb-runner

运行 mongodb-runner:

1	mongodb-runner start

这里执行完毕后, 需要等待一会.

你会看到如下信息:

1	Starting a MongoDB deployment to test against...

上面运行结束后, 你可以查看 MongoDB 是否在运行:

1	lsof -iTCP:27017 -sTCP:LISTEN

会显示当前正在运行的信息:

1 2	COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME mongod 86824 mark 7u IPv4 0x91959c43a65644ed 0t0 TCP *:27017 (LISTEN)

停止 mongodb 运行的方式如下:

1	mongodb-runner stop

查看数据

Parse Dashboard

GraphiQL

启动 react-native

1	react-native start

运行 f8app

Android:

1
2
3

react-native run-android
adb reverse tcp:8081 tcp:8081   # required to ensure the Android app can
adb reverse tcp:8080 tcp:8080   # access the Packager and GraphQL server

iOS:

1	react-native run-ios

如果出现红色背景的 error 提示, 可以不管, 直接 Dismiss 即可.

然后可以看到如下界面:

问题

1.在运行后关闭登录按钮, 报错:

1	AppEventsLogger.logEvent

解决方案:

在 /js/store/track.js 文件的第 43 行, 注释掉 log, 如下:

1
2
3

case 'SKIPPED_LOGIN':
      //AppEventsLogger.logEvent('Skip login', 1);
      break;

在模拟器上面重新 Reload 即可.