React Native MacOS环境搭建
https://reactnative.cn/docs/getting-started/
React-Native入门指导之iOS篇 —— 一、准备工作
React-Native 入门指导系列教程目录
一、准备工作 (已完成)
二、项目介绍与调试
三、CSS样式与Flex布局
四、常用UI控件的使用
五、JSX在React-Native中的应用
六、事件与数据调用
七、自定义组件
八、动手写实例
九、发布与真机调试
写在前面
1. 什么是React-Native?
React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台。
React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。
2.React-Native有啥优缺点?
优点是:能够用JavaScript脚本就可以写出App的界面,对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。
和其他的移动Web框架相比:
- Native不用WebView,彻底摆脱了WebView让人不爽的交互和性能问题;
- Native的原生控件有更好的体验;
- Native有更好的手势识别;
- Native有更适合的线程模型;
缺点是:还在试用阶段,潜在的问题尚不得而知:兼容性问题,性能问题等。还没大量普及,学习资料尚且不多,供爱折腾的朋友尝尝鲜。
3.成功案例有哪些?
那么,现在有哪些公司在用这个新出来的技术呢?据了解,有些国内走在技术前沿的公司已经开始在试用React.js开发项目了。
天猫iPad客户端“猜你喜欢”业务,支付宝新一代的框架基于React;携程网App部分新业务;去哪儿网给航空公司用的收益辅助系统;百度图片搜索无线的新首页,部分试水;Quip 最好用的在线文档协作工具……
4.要学些什么?
想必,大家已经按耐不住,会发问,使用React-Native开发要学习些什么呢?
- Html+CSS+JavaScript的基本功肯定是少不了;
- Node.js的基本概念学习。API文档:https://nodejs.org/dist/v4.2.2/docs/api/
- JSX: JavaScript语法的一个扩展,类似XML结构。https://facebook.github.io/react/docs/jsx-in-depth.html
- FLUX: Facebook公司的一个创建用户客户端web程序的框架。https://facebook.github.io/flux/docs/overview.html
好了,废话不多,直入正题吧。
环境配置
1. 硬件条件
你需要一台Mac电脑,或者是安装了OSX系统的电脑,这是iOS App开发的前提。
2. 软件条件
(1). 安装最新版的XCode,建议是XCode7.1及以上版本。(PS: 如果不是最新版,可能在之后新建项目的时候,会编译通不过。小编就是之前没把XCode升级到最新版,然后被一个编译问题困扰了很久。)
(2). 安装HomeBlew(OS系统上的一个安装包管理器,安装后可以方便后续安装包的安装。)
终端命令:
(3). 安装Node.js (服务端的JavaScript运行环境)
下载地址:https://nodejs.org/download/
成功安装后,终端会有如下提示信息:
(4). 建议安装WatchMan(React修改source文件的一个工具)
终端命令:
(5). 安装Flow: 一个JavaScript 的静态类型检查器。
终端命令:
(6). 安装React Native CLI: 用来开发React Native的命令行工具
终端命令:
装好了环境,就可以愉快的玩耍起来了。
创建项目
1. 新建一个项目
新建一个“HelloWorld”的项目,每个语言的开始教程都是这个,我们也不例外。
操作超级简单,只需终端输入命令行:
2. 运行项目
创建的项目包含Andriod和iOS两个版本,我们这边就先介绍iOS的操作。(Andriod的操作也大同小异,无非就是编译的环境不同,js文件中的内容和写法都是通用的。学会了iOS的用法,再研究Andriod下的React-Native开发,会很轻松。)
用XCode打开ios/HelloWorld.xcodeproj文件,点击键盘"⌘-R”或者点击"Run",编译运行项目。会启动React-Native服务和iOS模拟器。
在iOS模拟器中可以看到如图界面:
React-Native服务在编写过程中要一直开着,如图:
如果不小心把它关了,没关系,可以在终端输入:
来重新开启服务。
如何调试
安装谷歌的Chrome Developer Tools,具体使用方法,在之后的教程中会再具体介绍。
参考文章:https://facebook.github.io/react-native/docs/debugging.html
安装React Developer Tools
译注:react-devtools依赖于electron,而electron需要到国外服务器下载二进制包,所以国内用户这一步很可能会卡住。此时请在环境变量中添加electron专用的国内镜像源:ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/",然后再尝试安装react-devtools。
一、怎么添加环境变量?
找到.bash_profile文件
(译注:~表示用户目录,即/Users/你的用户名/,而小数点开头的文件在Finder中是隐藏的,并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作,请自行学习。或者直接进文件夹找)
打开Finder,找到 /Users/你的用户名/ 下的.bash_profile文件,默认该文件是隐藏的,可以通过快捷键command+shift+. 来显示或隐藏 隐藏文件。
双击打开.bash_profile文件,并添加内容修改后保存。
export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
- 然后使用下列命令使其立即生效(否则重启后才生效):
source ~/.bash_profile
二、安装react-deltools
- 安装
npm install -g react-devtools
- 安装完成后在命令行中执行react-devtools即可启动此工具:
react-devtools
作者:风起长林时
链接:https://www.jianshu.com/p/06df38a956dc
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
electron无法安装怎么办?淘宝cnpm来帮忙
笔者又一次遇到了问题,这次是electron。
当我使用命令 npm install electron -g 安装时,总是无法安装成功,而且每次都是在>node install.js
经过多方排查,确定是registry源出了问题(难道又是被墙?),这点已经得到了大家的认可。网上的做法多是使用命令
npm config set registry=https://registry.npm.taobao.org
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron
将注册源转为国内的镜像,笔者刚开始也是这么做的,结果错误依旧,这真是让我再一次想要摔键盘了。冷静下来后,项目还是要继续,根据提示,我直接进入log查看到底是哪里出了问题。
一看,发现我们的registry源依然是官网的
也就是使用命令行的方式并不能将registry源改过来。网上还有一种方式说要将ELECTRON_MIRROR放到环境变量配置中,死马当活马医嘛,直接写入到.bashrc中,并source .bashrc,结果还是ERR。
怒,到底怎么办!再次看信息,发现这么一句话,大意是说“这个不是npm的问题啊,是其他东西出了问题”
这不是此地无垠三百两吗~你不说这句我还不知道,刚才去"淘宝网"逛街的时候看到了cnpm,可以完全替代npm,并能访问国内的镜像。想到就干:
npm install cnpm -g --registry=https://registry.npm.taobao.org
成功安装cnpm后,将cnpm替换npm,执行命令:cnpm install electron -g
整个安装进程界面都不一样了有木有!
至此electron顺利安装!
---------------------
作者:zhujuyu
来源:CSDN
原文:https://blog.csdn.net/zhujuyu/article/details/79230643
版权声明:本文为博主原创文章,转载请附上博文链接!
以上是 React Native MacOS环境搭建 的全部内容, 来源链接: utcz.com/z/382902.html