React Native 开发系列1 项目搭建

栏目: IOS · Android · 发布时间: 7年前

内容简介: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-navigationreact-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/compomentsapp/screens 目录用来放自己写的组件。修改 index.ios.js 加载自己的导航栏。第一次安装完vector-icons reload,可能会出现 Unrecognized font family xxx 这种错误,退出模拟器,重现执行一下 react-native run-ios 可以解决。

代码见 Github

一切顺利的话,就能看到我们自己想要的导航栏了。 React Native 开发系列1 项目搭建


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

拆掉互联网那堵墙

拆掉互联网那堵墙

庄良基 / 经济日报出版社 / 2014-6 / 25.80

都在说道互联网、说道电子商务、说道移动APP、说道微信、说道互联网金融......我们该如何认识互联网?中小微企业该如何借力互联网?互联网很神秘吗?很高深莫测吗? 其实互联网并没有什么神秘的,也没有什么高深莫测的!互联网无非是人类发明的工具而已,既然是工具,我们就一定可以驾驭和使用它。既然可以双重使用,就理当让所有有人都容易掌握并轻松驾驭。 互联网离我们很远吗?互联网界的成功故事都是那......一起来看看 《拆掉互联网那堵墙》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具