React Native MacOS环境搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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。

一、怎么添加环境变量？

  1. 找到.bash_profile文件

    (译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在Finder中是隐藏的，并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作，请自行学习。或者直接进文件夹找）

  2. 打开Finder,找到 /Users/你的用户名/ 下的.bash_profile文件，默认该文件是隐藏的，可以通过快捷键command+shift+. 来显示或隐藏 隐藏文件。

  3. 双击打开.bash_profile文件，并添加内容修改后保存。

export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

  1. 然后使用下列命令使其立即生效（否则重启后才生效）：

source ~/.bash_profile

二、安装react-deltools

  1. 安装

npm install -g react-devtools

  1. 安装完成后在命令行中执行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

回到顶部