看了一些RN资料,仅仅了解到人们对 RN(以下简称 React_native 框架) 的使用描述以及评价,就觉得RN是一个很不错的框架,值得学习。
今天就开始写我的学习记录,也给大家分享一下。下面进入正题:
环境的搭建:
1、推荐使用 HomeBrew 来安装 node 、watchman、flow
2、使用 brew install node 来安装 node
3、使用命令 brew install --HEAD watchman 来安装 watchman .推荐安装 watchman 否则我们会需要一个 node 文件来监控开发中的 bug.
4、使用命令行 brew install flow 如果要使用 flow 的话。

使用命令行 npm install -g react-native -cli
使用命令行 react -native init jwFist_RN_Project
使用命令行 cd jwFirst_RN_Project

将程序通过命令行开始运行
cd /Users/mac/jwFirst_RN_Project
react-native run-iso

这时候终端是长这样子的:

CAB2BFA4-2495-4662-A7B6-DCBBD5384CAF.png
或者可以打开程序的位置进行手动的运行。
/Users/mac/jwFirst_RN_Project/ios/jwFirst_RN_Project.xcodeproj

最后出现这个就说明成功了。

下面对使用命令行创建的 RN 程序做下简要的说明,方便自己记忆:

react -native 命令初始化 jwFirst_RN_Project 的时候都做了些什么事情?
1、新建的一个名为 jwFirst_RN_Project 的文件夹。
2、在这个文件夹中创建了 package.json
3、npm insatll —save react-native 命令开始运行,这个命令的作用是安装了 react-native 的依赖,这些依赖放在 jwFirst_RN_Project/node_modules文件夹中,在 jwFirst_RN_Project/package.json 声明了 react-native 作为项目的依赖。
4、全局安装 react-native CLI (就是 react-native 的命令行工具) 并将控制权交给本地的 CLI 工具,就是 jwFirst_RN_Project/node_modules/react-native/local-cli/cli.js 文件。
5、接下来生成 jwFirst_RN_Project/node_modules/react-native/init.sh 文件,这个文件是用来生成标准代码的脚本,比如 index.ios.js 文件,IOS 文件夹中的 OC 代码,以及 jwFirst_RN_Project 中的相关 Xcode 的项目配置。

React-Native (下面简称为 RN),RN 是基于 javaScript 的,这些 javaScript 代码在 index.ios.js 中组成一个真是的应用。
package.json 它定义了项目的一些元数据,更重要的是它声明了我们的项目对 RN 的依赖。
node_modules 文件夹是在 npm install 进行项目初始化的时候生成的,它包含 RN 的源代码,其他 npm 的依赖,大量的 JavaScript 代码,和OC 代码。
初始化进程也提供了基本的Xcode项目和定义一些附加的OC样板代码,它允许我们在Xcode中打开一个项目并运行一个项目,而不需要其他的任何条件。我们可以通过RN来简化这些步骤与流程。
如果要讲第三方库整理到 RN 项目中,需要在根目录下增加 Podfile 文件。Podfile 是一个类似于 package.json 的东西,它为 CocoaPods 做依赖管理,声明了OC 库的依赖。
jwFirst_RN_Project 项目是一个 Xcode 项目,是一个 NPM 项目,是一个基于 JavaScript 的 RN 项目,也包含了好多的 IOS 胶水代码,用来让 JavaScript 代码运行在 iOS 环境中。

下面是我在两台电脑上分别进行安装 RN 的时候遇到的问题:
使用命令行 npm install -g react-native -cli 的时候遇到问题,如图:

解决办法:参照网上的方法
输入命令行:sudo npm install -g hero-cli
最后终于解决了

但是后来又在另一台电脑上进行安装 RN 环境,又遇到了该问题,最后查阅资料解决了:
记录如下:
遇到问题
在安装 React-Native 的时候,遇到权限的问题,最后通过两行命令解决(参考:https://docs.npmjs.com/getting-started/fixing-npm-permissions)
1、找到 npm 的路径,命令行:npm config get prefix
运行的结果可能是:
/usr/local.
2、改变 npm 的路径到当前的用户路径,命令行:
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
可以看到如下图,权限问题已经解决。

目前 RN 尚不稳定,这里仅仅做当前的实验,以后遇到问题了再补充,先分享给大家。

React-Native 基本环境的搭建的更多相关文章

  1. React Native开发环境的搭建

    我只能说搭建开发环境还是不能相信网上纷乱的博客,还是中文网靠谱. http://reactnative.cn/docs/0.47/getting-started.html 纯粹只是为了记录一下.

  2. React Native的环境搭建以及开发的IDE

    (一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...

  3. React Native iOS环境搭建

    前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...

  4. React Native开发 - 搭建React Native开发环境

    移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...

  5. 搭建React Native开发环境

    搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...

  6. 搭建基本的React Native开发环境

    步骤如下: 1.安装HomeBrew,命令如下: 在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Home ...

  7. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

    [React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...

  9. Mac配置React Native开发环境

    一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提 ...

  10. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

随机推荐

  1. 混合背包 hdu5410 CRB and His Birthday

    传送门:点击打开链接 题意:你有M块钱,如今有N件商品 第i件商品要Wi块,假设你购买x个这种商品.你将得到Ai*x+Bi个糖果 问能得到的最多的糖果数 思路:很好的一道01背包和全然背包结合的题目 ...

  2. 计算机的一些经典书籍CS经典书单

    c++: <c++程序设计> <c++primer> <effective c++> <more effective c++> <深入探索c++对 ...

  3. 笔记本POWER部分的应用——(MOS/LDO/BUCK BOOST)

    一.MOSFET 简介: 金属-氧化物半导体场效应晶体管,简称金氧半场效晶体管(Metal-Oxide-Semiconductor Field-Effect Transistor, MOSFET)是一 ...

  4. java基础&amp;&amp;高薪面试

    董鹏老师 ,多年经验总结出 [高薪就业必备]之java基础面试题[更新中]:     第01篇       学习Java基础的目的?       第02天       java语言中有没有gotoke ...

  5. [oracle]pl/sql --分页过程demo

    这句sql能够用来查询一张表中的特定位置的记录 --查询的方法获取分页的语句 select *from (select t1.*,rownum rn from (select *from books) ...

  6. HashSet、LinkHashSet、TreeSet总结

    HashSet:散列集,集合中的元素不允许重复,但是不要求顺序,输出的顺序和进入HashSet的顺序是没有关系的 LinkedHashSet :链表散列集,集合中的元素不允许重复,同时要求和进入Set ...

  7. React Native组件解析(二)之Text

    React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...

  8. 【BZOJ2400】Spoj 839 Optimal Marks 最小割

    [BZOJ2400]Spoj 839 Optimal Marks Description 定义无向图中的一条边的值为:这条边连接的两个点的值的异或值. 定义一个无向图的值为:这个无向图所有边的值的和. ...

  9. 【BZOJ3041】水叮当的舞步 迭代深搜IDA*

    [BZOJ3041]水叮当的舞步 Description 水叮当得到了一块五颜六色的格子形地毯作为生日礼物,更加特别的是,地毯上格子的颜色还能随着踩踏而改变.为了讨好她的偶像虹猫,水叮当决定在地毯上跳 ...

  10. EasyDarwin EasyClient开源流媒体播放器,支持多窗口显示

    EasyDarwin开源团队开源的EasyClient客户端将支持流媒体采集.编码.推送.播放.抓图.录像.Onvif 等全套功能(大家持续关注我们Github的commit),其中播放功能是开源流媒 ...