这两天在学习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. 腾讯云主机 MySQL 远程访问配置方法

    使用腾讯云主机安装 MySQL 之后,需要通过以下步骤进行配置以实现远程访问,主要分为两大部分 一.服务器端口配置 1.如果你的云主机配置了安全组,如果没有配置安全组就可以直接跳过“步骤1”的操作,否 ...

  2. centos7 部署 ELK 日志系统

    =============================================== 2017/12/24_第3次修改                       ccb_warlock 更 ...

  3. python logging一个通用的使用模板

    import os import logbook from logbook.more import ColorizedStderrHandler from functools import wraps ...

  4. [编织消息框架][netty源码分析]13 ByteBuf 实现类CompositeByteBuf职责与实现

    public class CompositeByteBuf extends AbstractReferenceCountedByteBuf implements Iterable<ByteBuf ...

  5. 搭建非域AlwaysOn win2016+SQL2016

    搭建非域AlwaysOn win2016+SQL2016 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnblogs.co ...

  6. Django__RBAC

    RBAC : 基于角色的权限访问控制(Role-Based Access Control) RBAC 模型作为目前最为广泛接受的权限模型 角色访问控制(RBAC)引入了Role的概念,目的是为了隔离U ...

  7. PHP使用ueditor上传配置

    引入 按照ueditor官网demo, 引入好ueditor之后, 默认是不能进行上传操作的 在上传时,在上传时会有如下图提示 配置上传 在editor/php目录下,有一个config.json文件 ...

  8. 跨域WebApi的Jquery EasyUI的数据交互

    目录 1       大概思路... 1 2       创建WebAPI 1 3       创建CrossMainController并编写... 1 4       Nuget安装microso ...

  9. Oracle (11g) 修改默认的用户名及密码

    Oracle11g的云盘连接 Q1:安装完成Oracle数据后如何登录? A1:打开cmd窗口,输入sqlplus / as sysdba 后回车,以超级管理员身份登录,成功后如图所示(可以看到是or ...

  10. WFP在包含fwpmu.h头的时候出错

    最近在学WFP驱动框架,在使用VS2013写代码调用WFP的函数时会包含fwpmu.h这个头,但是在包含这个头的时候会报错,就像下面这个图这样: 我百度了一下,然后在这个网站上面找到了解决方案: ht ...