这两天在学习react native,被虐得布耀布耀的,运行一个hello world花了一天时间(手动捂脸)。

  由于是跟着官网走,所以一开始便是开发环境的搭建。其他的就不说了(详情见 React Native开发环境搭建)。这里说说我踩的坑。

  1、下载Android Studio(可去 官网 下载)。

  2、安装、

      

      直接next。

      

      点击Next。

    

      

      点击 I Agree。

      

    。。。。。。。。。。

      安装完毕后,启动开始配置

      

      如果本机之前有安装过,可以直接导入配置信息。这里没安装过,就选择下面的。点击ok

      

      点击Cancel,等一段时间程序会自动启动,会出现如下界面:

      

      点击Next

      

      安装好后进入界面

      

      (1)、配置JDK和SDK的路径(JDK提前安装好)。 

      (2)、配置ANDROID_HOME环境变量。确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

      (3)、将Android SDK的Tools目录、platform-tools目录添加到PATH变量中

      (4)、安装Yarn、React Native的命令行工具(react-native-cli)(npm install -g yarn react-native-cli)。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

     一切就绪后,可以初始化一个React Native项目了,

     react-native init 项目名 // 初始化一个项目 
      
     cd 项目所在的路径 
    
     运行项目前,先打开Android Studio,如图操作,选择一个虚拟设备,并运行。
     

        虚拟设备运行后,界面如下:

        

      下面可以开始执行以下命令
     npm install // 安装项目所依赖的包,如出现警告信息(WARN字样),可忽略 
      
     react-native run-android // 如果Android上,则运行该命令 react-native run-ios // ios上运行 

    可能会出现如下所示错误,

    

    提示未找到Build Tools 23.0.1这个版本,进入Android Studio后发现我的版本是25.0.3的。

    

      现在进入刚初始化的项目,找到android这个文件夹,进入后找到app文件夹下的build.gradle文件,修改里面的配置文件,将其修改为与Android Studio相对应的版本。如我的则需修改为25 和25.0.3

      

      再次运行,如果还是报错,这时候有可能就是缺少一个文件local.properties(注:该文件位于项目下android文件夹中),该文件就是说明SDK的安装路径的,如我的是这样的(注意,斜杠与双斜杠问题,虽然我也不懂为啥是这样的)

        

      然后重新运行项目,就会成功的。

      

  

初窥React Native的更多相关文章

  1. 移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native

    React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...

  2. React Native 之TabBarIOS

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  4. React Native实例

    本文主要包括以下内容 View组件的实例 Text组件实例 Navigator组件实例 TextInput组件实例 View组件的实例 效果如下 代码如下 /** * Sample React Nat ...

  5. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  6. 对比React Native、dcloud、LuaView三个框架技术(内部)

    转载自:http://www.jianshu.com/p/ee1cdb33db8d主要对比React Native和5+SDK(就是dcloud的SDK)两个: 开发语言:三个都是用其他语言来统一开发 ...

  7. H5、React Native、Native应用对比分析

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...

  8. H5、React Native、Native性能区别选择

    “存在即合理”.凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移 ...

  9. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

随机推荐

  1. ActiveMQ (三) 讯息传送机制以及ACK机制

    详析请看如下博客: http://blog.csdn.net/lulongzhou_llz/article/details/42270113 后续再做整理.

  2. 谈谈序列化—实体bean一定要实现Serializable接口?

    导读:最近在做项目的过程中,发现一个问题,就是我们最开始的时候,传递参数包括返回类型,都有map类型.但是由于map每次都要匹配key值,很麻烦.所以在之后就将参数传递和返回类型全都改成了实体bean ...

  3. 如何写一个SSH项目(三)如何进行交互的

    下面以登录为例子,展示从前台到后端的一整套流程并进行分析. 首先介绍一下我的SSH的分层结构 action和service一起是业务逻辑层          action层调用service层 dao ...

  4. CGO 类型(CGO Types) 一

    CGO Types C作为一种混合编程语言已经很久了,无论那些广泛使用的包是用何种语言实现的,都导出了和C兼容的API.Go程序调用C程序,可以借助两种工具实现,一种是cgo,另一种是SWIG工具.C ...

  5. unity demo之坦克攻击

    先展示一下成果吧,节后第一天上班简直困爆了,所以一定要动下脑子搞点事情. 分析: 1.涉及到的游戏对象有:坦克,摄像机,场景素材(包含灯光),子弹 2.坦克具有的功能:移动,旋转,发射子弹,记录生命值 ...

  6. touch事件应用

    js的touch事件,一般用于移动端的触屏滑动: $(function(){ document.addEventListener("touchmove", _touch, fals ...

  7. 让git不再跟踪配置文件的变化

    我们经常会在配置文件里留下一些敏感信息 比如数据库链接字符串的用户名和密码 如果不提交配置文件到github或者其他源码管理网站 那么你的粉丝很可能就无法正确运行你的项目,就达不到开源的目的了 那么, ...

  8. 搭建Vue.js开发环境(window10)

    我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...

  9. 第四章:大数据 の HBase 基础

    本课主题 NoSQL 数据库介绍 HBase 基本操作 HBase 集群架构与设计介紹 HBase 与HDFS的关系 HBase 数据拆分和紧缩 引言 介绍什么是 NoSQL,NoSQL 和 RDBM ...

  10. BIOS 品牌快捷键

    主板品牌 启动按键 笔记本品牌 启动按键 台式机品牌 启动按键 华硕主板 F8 联想笔记本 F12 联想台式机 F12 技嘉主板 F12 宏基笔记本 F12 惠普台式机 F12 微星主板 F11 华硕 ...