React-Native 学习系列课程笔记(React-Native开发环境搭建)

对于2016年最火爆的前端H5框架无疑是Facebook推出的React, React框架可以说是一个系列框架,可以分为web端,服务端,移动端,其核心思想都是自己组件化开发,这也是未来前端或者是移动领域一个不小的趋势所在。那么今天我们就来尝试一下React-Native,这个一个对于一个移动领域不小的突破, 目前其主要针对两个平台,IOS和Android, 我们先来搭建一个开发环境, 这里推荐大家
摘要由CSDN通过智能技术生成

对于2016年最火爆的前端H5框架无疑是Facebook推出的React, React框架可以说是一个系列框架,可以分为web端,服务端,移动端,其核心思想都是自己组件化开发,这也是未来前端或者是移动领域一个不小的趋势所在。

那么今天我们就来尝试一下React-Native,这个一个对于一个移动领域不小的突破, 目前其主要针对两个平台,IOS和Android, 我们先来搭建一个开发环境, 这里推荐大家使用Mac os,因为我们可以同时构建两个平台产品,方便统一管理。

基础环境安装

想运行React-Native项目我们就必须安装基础环境,比如Node.js, React-Native命令行工具,还有发布工具Xcode.

NodeJS的安装这就不在赘述, 安装好node,可以通过npm安装react-native命令行工具:

sudo npm install -g react-native-cli

测试安装,创建Demo案例

我们可以查看当前工具的版本号,例如:

react-native --version

接下来我们创建一个简单的Demo, 当然这个Demo是官方提供给我们的:

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

这时会自动启动termial 窗口,对项目进行编译:

这里写图片描述

等待片刻,ios 模拟器会自动打开,并运行项目, 如下:

这里写图片描述

我们也可以尝试编辑index.ios.js, 保存后, 重新运行模拟器。

如果你的mac os上安装了android的开发环境,并配置了环境变量,你也可以尝试运行android app, 通过:

react-native run-android

在运行android的过程中, 可以会报错误,ANDROID_HOME找不到的错误,这就需要大家自己手动配置android_home在你的机器中。

具体操作方法,大家可以参考我下面的这个博客:

http://blog.csdn.net/jiangbo_phd/article/details/50673017

好了,自己试试吧!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天外野草

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值