React Native 开发系列1 项目搭建

为了写一个自用的日语学习app，准备学习一下React Native，并且希望能够顺便记录一下作为一名后端开发怎么完成一个自己的app。一是帮助自己理解，或是机缘巧合能给有相同经历的人一点帮助，那就更好了。

这是系列的第一篇–项目搭建，先写一个简单的目录，后面在更新。

目录

1. 项目搭建– 底部导航栏及搜索

声明：

1. 笔者自己有几年的后端开发经验以及快要忘掉的一点前端知识。
2. 所有开发过程在MacBook macOS 10.12上进行， Xcode版本 8.3.2 (8E2002)， React Native版本 0.44, Node.js 7.10.0。

第一步 搭建开发环境

安装开发工具

按照React Native的 文档 安装必要的开发工具。

brew install node
brew install watchman
npm install -g react-native-cli

初始化项目

cd ~/Documents/workspace/apple/
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

现在应该就可以在iOS的模拟器里看到React Native的欢迎页面了。修改index.ios.js文件 Command⌘ + R reload就能看到修改，非常方便。

第二步 First commit – 导航栏+搜索框

要写的日语学习app，暂定会有四个tab，单词、阅读、社区和个人页面。单词页面需要能够搜索单词。我打算先把底部导航和搜索做上去。

这里需要几个现有的React Native库， react-native-vector-icons , react-navigation 和 react-native-elements 。

npm i react-native-vector-icons --save && react-native link react-native-vector-icons
npm install --save react-navigation react-native-elements
react-native link

创建 app/compoments 和 app/screens 目录用来放自己写的组件。修改 index.ios.js 加载自己的导航栏。第一次安装完vector-icons reload,可能会出现 Unrecognized font family xxx 这种错误，退出模拟器，重现执行一下 react-native run-ios 可以解决。

代码见 Github

一切顺利的话，就能看到我们自己想要的导航栏了。