先说一下我为什么学习RN

18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司。第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队。正好有充足的时间去学习和研究技术!

公司没有iOS,总监要求后期打算用React Native开发,why? —— no why。是的,是时候去学习React Native 了!

技术背景

关于RN的背景,相信大家都知道了。

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。

RN采用标签式的界面布局,叫css-layout,和CSS基本一样。虽然是第一次使用这种方式布局界面,用熟之后觉得还是很方便的,代码量少,很直接。

如果你狠熟悉Web前端,恭喜你!只需很少的学习就可以进入移动应用开发领域

至于自己对于RN的理解

RN就是在HTML上和native APP 以及在 hybrid APP 、native +web 上进行取长补短,于是演进了混合模式的开发。——React Native

工欲善其事必先利其器

环境的搭建

1、安装jdk

2、安装SDK
在FQ的环境下,可以选项Http://androiddevtools.cn/

3、安装C++环境

选择Windows SDK、cygwin活mingw等其他C++环境。变价node.js的C++模块式需要用到

4.安装node.js与Git

Node.js是一个基于Chrome v8引擎的JavaScript运行环境。Node.js使用了一个事件驱动,并非阻塞I/O的模型,使其轻量又高效,Node.js的包管理器nmp,是全球最大的开源库生态系统。

下载链接

https://git-for-windows.github.io

建议设置npm镜像以加速后面的过程(可以使用***)

相关的配置:

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

5.安装React Native 命令行工具

github下载

cd到react-native-cli 执行react-native-cli安装命令

npm install -g react-native-cli

first-detail --->

//配置环境变量

  • 1.打开cmd,输入echo

  • 2.第二步输入 echo %PATH%

  • 3.打开git安装目录

  • 找到git-cmd.exe进行配置

  • 陆续配置 第四部和第五步的环境变量
    <----

6.创建项目

比如在E盘下创建E:\englis_install\appProject,

cd 项目下面 dir

react-native init MyProject

7.运行packager
注意:要进入跟程目录
react-native start

可以用浏览器访问:http://localhost:8081/index.android.bundle?platform=android or http://localhost:8081/index.bundle?platform=android

8.准备模拟器或者 是真机运行Android
(注意是 真机的话,需要开启USB开发调试)

react-native run-android or react-native run-ios

踩坑:

1,问题:找不到SDK,或者无法正常化 SDK的流经 ,解决办法:配置环境变量

  1. failed to find target with hash String 'android-23' in F://android/android-sdk 姐伯爵办法,你懂的,更新相对应的sdk

3.build成功之后,显示的手机界面是红色的 。没有链接服务器 js Service

React Native 的利和弊

https://blog.csdn.net/gang544043963/article/details/77507940

如果有什么 问题,欢迎和我交流 微信公众号:终端研发部

技术

手把手教你React Native 实战之开山篇《一》的更多相关文章

  1. 0、手把手教React Native实战之开山篇

    ##作者简介 东方耀    Android开发   RN技术   facebook   github     android ios  原生开发   react reactjs nodejs 前端   ...

  2. 30分钟手把手教你学webpack实战

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  3. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  4. RN 实战 & React Native 实战

    RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...

  5. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  6. 手把手教你用Pytorch-Transformers——实战(二)

    本文是<手把手教你用Pytorch-Transformers>的第二篇,主要讲实战 手把手教你用Pytorch-Transformers——部分源码解读及相关说明(一) 使用 PyTorc ...

  7. rodert教你学FFmpeg实战这一篇就够了

    rodert教你学FFmpeg实战这一篇就够了 建议收藏,以备查阅 pdf阅读版: 链接:https://pan.baidu.com/s/11kIaq5V6A_pFX3yVoTUvzA 提取码:jav ...

  8. 3、手把手教React Native实战之flexbox布局

    flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...

  9. 6、手把手教React Native实战之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现! JSX并不是一 ...

随机推荐

  1. request和reponse

  2. swift之函数式编程

    函数式编程初探 最近初学swift,和OC比,发现语言更现代,也有了更多的特性.如何写好swift代码,也许,熟练使用新特性写出更优秀的代码,就是答案.今天先从大的方向谈谈swift中的编程范式-函数 ...

  3. 结构体类型struct

    教学视频 定义: struct student{CString name; int num; TCHAR sex; int age; };   //注意有个分号 student zansan = {_ ...

  4. luogu P3172 [CQOI2015]选数

    传送门 颓了一小时柿子orz 首先题目要求的是\[\sum_{x_1=l}^{r}\sum_{x_2=l}^{r}...\sum_{x_n=l}^{r}[gcd(x_1,x_2...x_n)=k]\] ...

  5. 2017CCPC秦皇岛 G题Numbers&&ZOJ3987【大数】

    题意: 给出一个数n,现在要将它分为m个数,这m个数相加起来必须等于n,并且要使得这m个数的或值最小. 思路: 从二进制的角度分析,如果这m个数中有一个数某一位为1,那么最后或起来这一位肯定是为1的, ...

  6. MySQL对表数据操作

    一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table sys_application comment '系 ...

  7. CMFCToolBar、CMFCStatusBar

    首先删除注册表HKEY_CURRENT_USER\Software\应用程序向导生成的本地应用程序之下你这铬软件的配置 CMFCToolBar m_myToolBar; CMFCToolBarImag ...

  8. 假设程序需要一个int类型的变量来保持你所有的音乐CD的数量

    假设程序需要一个int类型的变量来保持你所有的音乐CD的数量.初始值为0为该变量编写一条声明语句 int numCDs = 0;

  9. python初级实战-----关于邮件发送问题

    python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用.smtplib模块主要负责发送邮件,email模块主要负责构造邮件. sm ...

  10. 通过SecureCRT连接虚拟机

    继续上一篇: http://www.cnblogs.com/CoolJayson/p/7430421.html 上一篇配置了虚拟机网络环境, 实际开发中通常使用SecureCRT或Xshell等连接L ...