ReactNative 从环境和第一个demo说起,填坑教程
一、React-Native MacOS必备环境配置:
1.安装homebrew(这东西可以理解为命令行的app商店)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.安装Node.js环境(解析JS所需的环境node+安装之后你就可以用npm命令了)
brew install node
3.安装 watchman (用来检测代码改变的工具)
brew install watchman
4.使用 `npm` 安装 React Native CLI 工具
npm install -g react-native-cli
5.上面一步如果【实在不行】把NPM的源改成淘宝
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
好了,到此为止,基本环境已经全部搞定。
二、先跑个官方的初始化demo压压惊
1.在任意文件夹下运行(此工程已经直接帮你安装好依赖包了,所以直接跑就行)
react-native init MyFirstAppRN
2.直接打开运行iOS的工程即可,看到蓝色的奇奇怪怪的非常辣鸡的界面,说明运行成功了。
3.天坑提醒:在运行新的React-native工程时,切记把之前跑过的终端关掉!!!因为前一个Node服务器还在运行,这次运行肯定失败。
我被这坑过无数,虽然无数教程本来就是他妈无法运行的,但这个init的工程我亲身尝试,确实是可以直接运行的。
4.改一行代码试试:
index.ios.js里定义了首页加载的姿势,比如可以把这里改掉:
class MyFirstRN extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
这他妈就是 React Native?
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
此时并不需要关APP,直接按苹果键cmd+R刷新下就出现最新结果了。
至此,基本技能已经掌握。
如果到此还跑不起来,再看一遍,如果还是不行,建议不要再当程序员。
ReactNative 从环境和第一个demo说起,填坑教程的更多相关文章
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- Mediapipe 在RK3399PRO上的初探(一)(编译、运行CPU和GPU Demo, RK OpenglES 填坑,编译bazel)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- Cocos2d-x 学习(1)—— 通过Cocos Studio创建第一个Demo
近期在工作上有了比較大的转变,自学情绪也慢慢高涨,本来一直在研究unity的技术.由于换了工作会開始接触cocos2d-x.但并不意味着停止研究unity,以后有时间还是会继续的. 公司的cocos2 ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- 下载,配置环境变量,第一个demo
一.在 http://www.oracle.com 下载java JDK 安装到自定义的地方. 二.配置环境变量:在我的电脑→高级系统设置→环境变量 ① 找到Path新增一个路径(该路径为JDK存放的 ...
- lua入门之环境搭建、第一个demo
前言 前段时间因为有些项目功能需要,自己研究了下lua,今天整理下,并以一个demo为示例演示 手机上的运行效果 分为几个步骤来逐步讲解. 1.lua介绍,为什么选择它? 2.环境安装 3.撸一个简单 ...
- react-native 搭建环境
1.安装 nodejs 配置环境变量 node -v npm -v 2.安装 javaSE 1.8以上 http://www.oracle.com/technetwork/java/javase/ar ...
- (1)shiro简介和第一个demo
之前一直在用shiro开发,不过只是会使用,并没有深入了解,最近有时间学习了一下,把最近学习所得分享一下. shiro简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授 ...
- Angular2 不明真相第一个Demo例子
如果不是去年换工作接触到AngularJS,估计是不会花时间去学习这个框架的,毕竟是前端的框架,不是自己熟悉的领域.但是为了混得下去,去年就学习了AngularJS的一些用法,当时还整理了一些积累 & ...
随机推荐
- 页面之间传值方式的总结,五种方式,通知,block,代理,单例,NSUERDEFALUT,
首先代码拿上 1:单例 2:通知 3:代理 4:block方法 5:NSUSERDEFAULT(沙盒文件) 先是单例类: .h文件 @interface DataSource : NSObject @ ...
- sizeof与strlen的区别
1 sizeof是操作符,而strlen是库函数: 2 sizeof的参数可以为任意变量或类型,而strlen必须以char*做参数,且字符串必须以‘/0’结尾: 3 数组名用作sizeof参数时不会 ...
- JavaScript(js)的replace问题的解决
我是前端的门外汉,js我用得比较少.今天意外发现js自带的replace “居然”只替换1处,而其它的许多许多语言都是替换全部的. 你可能会说,切,我早就知道.高手请绕道. 你可能会说,用js的正则就 ...
- IntelliJ IDEA 教程设置讲解
IntelliJ IDEA 常用设置讲解 说明 IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.Ant.JUnit.CVS整合.代码审查 ...
- Service 广播 到Fragment
//Fragment public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Sys ...
- C#使用正则表达式检测数字 char 和韩文
if (!System.Text.RegularExpressions.Regex.IsMatch(strRoleName[i].ToString(), @"^[\uac00-\ud7ff] ...
- 嵌入式Linux驱动学习之路(二十)USB设备驱动
USB在接入系统的时候,以0的设备ID和主机通信,然后由主机为其分配新的ID. 在主机端,D+和D-都是下拉接地的.而设备端的D-接上拉时,表明此设备为高速设备:12M/s. D+接上拉时则是全速设备 ...
- quartz-1.8.5 Demo
最近在研究Spring中的定时任务功能,最好的办法当然是使用Quartz来实现.对于一个新手来说,花了我不少时间,这里我写个笔记,给大家参考. 我使用的是Maven来管理项目,需要的Jar包我给大家贴 ...
- PAT 1034. 有理数四则运算(20)
本题要求编写程序,计算2个有理数的和.差.积.商. 输入格式: 输入在一行中按照"a1/b1 a2/b2"的格式给出两个分数形式的有理数,其中分子和分母全是整型范围内的整数,负号只 ...
- CWMP开源代码研究3——ACS介绍
声明:本文涉及的开源程序代码学习和研究,严禁用于商业目的. 如有任何问题,欢迎和我交流.(企鹅号:408797506) 本文介绍自己用过的ACS,其中包括开源版(提供下载包)和商业版(仅提供安装包下载 ...