React Native 环境搭建for macOS

ReactNative,你必须知道的事实,它越来越火!作为移动开发者,唯一不能拒绝的就是持续性学习。let’s start!

欢迎交流,Dusan,Q-291902259,OpenDeveloper。

一,what’s React Native?

官方解说:React
Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。React
Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once,write
anywhere),Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。

二,React Native特色

1,原生组件

使用React Native,你可以使用标准的平台组件,例如iOS的UITabBar或安卓的Drawer。

2,异步执行

在Javascript代码和原生平台之间的所有操作都是异步执行的,并且原生模块还可以根据需要创建新的线程。

3,触摸事件处理

React Native实现了一个强大的触摸事件处理系统,可以在复杂的View层次关系下正确地处理触摸事件。

4,弹性盒(FlexBox)和样式

React Native从web中借鉴了FlexBox模型。。React Native还支持多种常见的web样式。

5,兼容通用标准

吸纳了web生态系统中的通用标准,并在必要的时候为这些API提供兼容层。

6,扩展性

使用自定义的原生视图和模块来扩展React Native也非常容易。

7,创建Android 、IOS View

创建自定义的Android View,自定义iOS View。最后用一个Javascript文件连接并进行包装。

三,环境搭建参照官方步骤,一步步来。

建议使用macOS - 本向导假设您的操作系统是macOS。
推荐使用Homebrew 来安装Node.js,Watchman和Flow。
如果不知道Homebrew如何安装,可以参照我的博文:Mac下安装常用开发工具

1,安装Node.js 4.0或更高版本:

直接使用brew install node安装即可

如果安装 nvm,运行:

nvm install node && nvm alias default node

这将会默认安装最新版本的Node.js并且设置好命令行的环境变量,这样你可以输入node命令来启动Node.js环境。nvm使你可以同时安装多个版本的Node.js,并且在这些版本之间轻松切换。

2,推荐安装watchman,否则你可能会遇到一个Node.js监视文件系统的BUG。

在终端命令行中输入:brew install watchman,

3,使用flow来为js代码加上类型检查

在终端命令行中输入:brew install flow

4,安装ReactNative步骤。

详见:官方安装指导
安装过程可能会遇到一些坑。以下是我的踩坑过程。比如文件夹权限问题,解决办法:提升权限 sudo chmod a+r path。

DuQian-MBP:~ duqian$ brew install node

“`
==> Downloading https://homebrew.bintray.com/bottles/node-5.11.0.el_capitan.bott

################################################################## 100.0%

==> Pouring node-5.11.0.el_capitan.bottle.tar.gz
==> Caveats
Please note by default only English locale support is provided. If you need
full locale support you should:
brew reinstall node --with-full-icu
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary

欢迎交流,Dusan,Q-291902259,OpenDeveloper。

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....