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

近期开始研究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

  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:

  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模拟器应该都跑起来了。实际效果如下:

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

本文独立博客地址

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

offbye

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值