在Windows上运行React Native官方项目f8app（适配Android）

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

Android环境运行F8App：

更新node和npm的版本(npm v3+)

查看node和npm的版本

node -v
npm -v

Windows下更新方法：直接下载新版本覆盖安装

Mac下可以安装n模块

npm install -g n

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

n stable

注：n模块不支持 Windows。n doesn't work on Windows because it's basically a giant (bash) shell script.

注：有些包通过npm install xxx安装无法完成，可以在后面加上--force强制安装 例如：npm install xxx --force

安装MongoDB并确认其能正常运行

MongoDB 是目前在IT行业非常流行的一种非关系型数据库(NoSql)，
其灵活的数据存储方式备受当前IT从业人员的青睐。

在 Windows平台下安装 MongoDB

官网下载：https://www.mongodb.com/download-center
这里下载：mongodb-win32-x86_64-2008plus-ssl-3.2.10-signed.msi
mongoDB中文社区：http://www.mongoing.com/

打开路径：C:\Program Files\MongoDB\Server\3.2，新建一个data文件夹和log文件夹

打开 CMD 命令提示符，切换到C:\Program Files\MongoDB\Server\3.2\bin目录下执行

mongod --dbpath "C:\Program Files\MongoDB\Server\3.2\data" --logpath "C:\Program Files\MongoDB\Server\3.2\log\MongoDB.log" --install --serviceName "MongoDB"

这里MongoDB.log就是开始建立的日志文件，--serviceName "MongoDB" 是创建名称为 MongoDB 的服务。

启动命令：net start MongoDB
停止命令：net stop MongoDB

在Windows的服务里也可以看到，并控制启动和停止

测试 MongoDB数据库

插入数据测试，启动 mongod 控制台程序，输入以下指令进行测试：

C:\Program Files\MongoDB\Server\3.2\bin>net start MongoDB

MongoDB 服务已经启动成功。

C:\Program Files\MongoDB\Server\3.2\bin>mongo
2016-10-04T17:21:05.593+0800 I CONTROL  [main] Hotfix KB2731284 or later update
is not installed, will zero-out data files
MongoDB shell version: 3.2.10
connecting to: test
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
        http://docs.mongodb.org/
Questions? Try the support group
        http://groups.google.com/group/mongodb-user
> db.foo.insert({a:1})  //往foo表插入{a:1}字段值，foo表为默认表
WriteResult({ "nInserted" : 1 })
> db.foo.find()  //查询foo表数据
{ "_id" : ObjectId("57f374a0eff68373c08863bb"), "a" : 1 }
>

安装依赖并启动 Parse/GraphQL 服务器:

在f8app目录下：

npm install

npm start

react-native start

导入样例数据

在f8app目录下：

npm run import-data

检查数据导入成功与否：启动mongod.exe mongo.exe

显示所有的数据库：show databases

选择一个数据库：use dev

查看所有的collection：show collections（相当于关系型数据库的表）

查询指定表数据：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

运行在Android设备上

react-native run-android

adb reverse tcp:8081 tcp:8081

adb reverse tcp:8080 tcp:8080