看了一些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. 【bzoi2006】【狼抓兔子】【最小割】

    Description Source: Beijing2006 [BJOI2006] 八中OJ上本题链接:http://www.lydsy.com/JudgeOnline/problem.php?id ...

  2. ftp的实现

    ftp.h #define BUFSIZE 512#define CMDSIZE 64#define ARGSIZE 64#define PASSIVE_ON 0x1 struct ftpcmd{ c ...

  3. 利用反射和泛型把Model对象按行储存进数据库以及按行取出然后转换成Model 类实例 MVC网站通用配置项管理

    利用反射和泛型把Model对象按行储存进数据库以及按行取出然后转换成Model 类实例 MVC网站通用配置项管理   2018-3-10 15:18 | 发布:Admin | 分类:代码库 | 评论: ...

  4. mysql + php 中文乱码 全是? 解决方法

    在my.ini文件中找到[client]和[mysqld]字段,在下面均加上default-character-set=utf8,保存并关闭,重启服务器 在window下重启失败,这是因为你安装了高版 ...

  5. 我的Android进阶之旅------&gt;Android中android:windowSoftInputMode的使用方法

    面试题:怎样在显示某个Activity时马上弹出软键盘? 答案:在AndroidManifest.xml文件里设置<activity>标签的android:windowSoftInputM ...

  6. Coder-Strike 2014 - Round 2

    t题目链接:Coder-Strike 2014 - Round 2 A题:简单水题,注意能加入反复的数字.因此仅仅要推断是否能把Min和Max加入好.就能够了 B题:开一个sum计算每一个聊天总和,和 ...

  7. 用Cocoapods集成XMPPFramework 遇 Module 'KissXML' not found 问题

    用Coacopods集成XMPPFramework完成后Command + B,报Module 'KissXML' not found 一般来说,通过Coacopods集成集成第三方框架,不会再有依赖 ...

  8. HDU 4622 Reincarnation 后缀自动机 // BKDRHash(最优hash)

    Reincarnation Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) P ...

  9. EasyDarwin开源流媒体社区视频教程

    EasyDarwin开源社区出视频教程了,经过几个深夜的努力,终于将第一次课程的5个课时的视频教程录好<EasyDarwin开源流媒体服务器:编译.配置.部署>,EasyDarwin后面会 ...

  10. ABAP DEMO-2018

    sap Program DEMO 介绍 Program Description BALVBT01 Example SAP program for displying multiple ALV repo ...