F8App-ReactNative项目源码分析1-初体验

悠悠 2022-07-24 09:12 167阅读 0赞

近期开始研究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 开发指南][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 ##

1.  [React Native][] (follow iOS and Android guides)  
    
    
     *  Xcode 7.3 +
2.  [CocoaPods][] (only for iOS)  
    
    
     *  Version 1.0+ recommended (`gem install cocoapods --pre`)
3.  [MongoDB][] (needed to run Parse Server locally)

## 修改后的安装过程 ##

1.  **Clone the repo**
    
        $ git clone https://github.com/fbsamples/f8app.git
        $ cd f8app
2.  **Install dependencies** (npm v3+):
    
        $ npm install
        $ (cd ios; pod install)        # only for iOS version
3.  **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][] 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
4.  **Start Parse/GraphQL servers:**
    
        $ npm start
        $ react-native start
5.  **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]
6.  **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
7.  **Running on iOS:**
    
        $ react-native run-ios

## 实际运行效果 ##

这样安卓和iOS模拟器应该都跑起来了。实际效果如下：

![1000][]

下篇文章开始分析f8app的服务器端结构。

[本文独立博客地址][Link 1]

[F8 App _ React Native]: http://f8-app.liaohuqiu.net/
[React Native]: http://facebook.github.io/react-native/docs/getting-started.html
[CocoaPods]: http://cocoapods.org
[MongoDB]: https://www.mongodb.org/downloads
[Homebrew]: http://brew.sh/
[http_localhost_8080_dashboard]: http://localhost:8080/dashboard
[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
[1000]: http://o79096vir.bkt.clouddn.com/static/images/f8app/f8app3.png?imageView2/2/w/1000
[Link 1]: http://www.offbye.com/2016/05/17/F8App-ReactNative%E9%A1%B9%E7%9B%AE%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%901-%E5%88%9D%E4%BD%93%E9%AA%8C/