React Native 【学习，F8App】

在2016的F8大会上，Facebook开源了使用React Native编写的F8 App，并且给出了一系列教程来说明完成该App的整个过程。F8 App是来自Facebook官方的App，这应该是我们学习React Native最好的教程。

1.下载项目

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

2.下载依赖

npm install

IOS的依赖需要额外操作: cd ios; pod install; cd ..

3.下载模拟的数据源，官方教程中的数据源服务器已经关闭，只能从个人开发者的库下载。

wget https://raw.githubusercontent.com/ReactWindows/f8app/data/mongodb/db.zip

4.解压数据包

unzip db.zip -d f8_db

5.用Mongodb，以wiredTiger为数据库引擎，f8_db为数据源启动。这里注意一定要用wiredTiger作为引擎，如果命令失败，可能是你的Mongodb版本有点旧了，升级一下。

mongod --storageEngine wiredTiger --dbpath f8_db

6.检测Mongodb是否启动成功

<1>检查端口 

命令行输入 lsof -iTCP:27017 -sTCP:LISTEN

显示 TCP *:27017 (LISTEN) 则Mongo已经启动。

<2>打开Mongodb,查看数据是否齐全。如下图。

7.启动相关服务，在项目根目录下调用。（能看到android\ios两个文件夹）

npm start

8.最后验证数据是否能被项目使用。

打开localhost:8080/dashboard和localhost:8080/graphql，能看到网页如下图有数据则说明已经成功载入数据。

9.用Android Studio打开项目。等待下载依赖和构建。

10.项目Gradle版本的的选择。包括 Gradle version\Android Plugin Version。选择的版本以你新建一个跑的通helloword项目的配置为准。选择的版本以你新建一个helloword项目的配置为准。选择的版本以你新建一个helloword项目的配置为准。（重事三）

我的选择是Gradle version 2.14.1 | Android Plugin Version 2.2.3

11.关闭Android Studio，命令行cd到android/ 目录，调用gradle build。

不要以为Android Studio构建成功了就真的是成功了，这里会报错，具体错误看提示一个个解决，都是比较基本的Android普通项目也会出的错。下面会列出一些。

12.启动项目，确保你已经打开了模拟器。

在根目录调用 react-native run-android

13.启动成功。如下图模拟器截图。

f8app截图1

f8app截图2

开始看看官方教程吧！

以下列出一些构建过程中出现的错误，让学习者少踩坑。

报错：

如果你发现刚才运行12还打开得了，再次运行就报错闪退了。

解决：删掉模拟器里面的F8app，调用命令重新安装就可以了。

报错：

AAPT:Error retrieving parent for item:No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored'

AAPT:Error retrieving parent for item:No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'

解决：github.com/facebook/react-native-fbsdk/pull/339

原因：Facebook Android SDK升级了，需要吧Gradle里面的引用改成4.22.1或以上

报错：

undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')

解决：

url "$rootDir/../node_modules/react-native/android" ，如下图。

关键是这句要对，准确的路径以你新建一个跑的通helloword项目的配置为准。准确的路径以你新建一个helloword项目的配置为准。准确的路径以你新建一个helloword项目的配置为准。（重事三）

报错：

关闭首次打开的登录界面后直接 crash

解决：参考 testerhome.com/topics/8230