内容简介：React Native 开发系列1 项目搭建
为了写一个自用的日语学习app，准备学习一下React Native，并且希望能够顺便记录一下作为一名后端开发怎么完成一个自己的app。一是帮助自己理解，或是机缘巧合能给有相同经历的人一点帮助，那就更好了。
这是系列的第一篇–项目搭建，先写一个简单的目录，后面在更新。
目录
- 项目搭建– 底部导航栏及搜索
声明：
- 笔者自己有几年的后端开发经验以及快要忘掉的一点前端知识。
- 所有开发过程在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
一切顺利的话，就能看到我们自己想要的导航栏了。 
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 搭建Typescript+React项目模板(4) --- 项目打包
- 健壮的数据仓库项目搭建
- vue入门（一）：项目搭建
- Spring项目本地环境搭建
- 搭建Typescript+React项目模板(3) --- 整理项目和杂项
- 搭建Typescript+React项目模板(1) --- 项目初始化
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
