F8App-ReactNative项目源码分析1-初体验
2016-05-19 本文已影响3708人
offbye西涛
近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。
我目前的技术情况是熟悉Android，Swift iOS，Node.js，MongoDB和JavaScript移动端开发，了解Objective C,React.js和React Native,但缺少实际开发经验，对Parse，GraphQL只是听说过。所以只能一步一步折腾了。本文将介绍f8app的实际上手经验，如何把f8app在Mac上run起来。
首先是阅读秋百万的构建 F8 App / React Native 开发指南 对项目有个整体了解。
然后到git上clone代码按说明运行起来，这一步遇到了坑，原因是官方的安装过程有错误，少了react-native start这个命令。
iOS启动后会报错，运行 react-native start就可以了
2016-05-17 11:34:12.357 [fatal][tid:main] Cannot find entry file index.ios.js in any of the roots: ["/Users/zhangxitao/work/github/f8app"]
项目依赖 Requirements
- React Native (follow iOS and Android guides)
- Xcode 7.3 +
- CocoaPods (only for iOS)
- Version 1.0+ recommended (`gem install cocoapods --pre`)
- MongoDB (needed to run Parse Server locally)
修改后的安装过程
- Clone the repo
```
$ git clone https://github.com/fbsamples/f8app.git
$ cd f8app
```
- Install dependencies (npm v3+):
```
$ npm install
$ (cd ios; pod install) # only for iOS version
```
-
Make sure MongoDB is running:
先下载mongodb或直接通过brew install mongodb命令安装。Mongodb不熟悉的需要先学习下mongodb的常用命令，和mysql有些类似。
```
$ lsof -iTCP:27017 -sTCP:LISTEN
$ mongod --dbpath YOURDATAPATH/mongodata/ & #启动mongodb
```
NOTE: if installed with [Homebrew](http://brew.sh/) run `brew info mongo` and
check out the Caveats section.
If you prefer to use an external MongoDB server, set `DATABASE_URI`:
```
$ export DATABASE_URI=mongodb://example-mongo-hosting.com:1337/my-awesome-database
```
- Start Parse/GraphQL servers:
```
$ npm start
$ react-native start
```
- Import sample data (the local Parse Server should be running): 并验证一下数据是否导入正确。
```
$ npm run import-data
$ mongo
MongoDB shell version: 2.6.5
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()
#会查到很多数据
```
Make sure everything works by visiting:
* Parse Dashboard: [http://localhost:8080/dashboard](http://localhost:8080/dashboard)
* Graph*i*QL: [http://localhost:8080/graphql](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)
- Running on Android:
```
$ 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
```
- Running on iOS:
```
$ react-native run-ios
```
实际运行效果
这样安卓和iOS模拟器应该都跑起来了。实际效果如下：
下篇文章开始分析f8app的服务器端结构。本文独立博客地址
