先说一下我为什么学习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. linux下安装好mysql后,登录时提示libgcc_s.so.1 must be installed for pthread_cancel to work

    网上找了很多帖子,各说纷纭, 自己到https://centos.pkgs.org/下载对应版本的libgcc_s.so.1,使用rpm -ivh libgcc-4.8.5-16.el7.i686.r ...

  2. 二十八、Linux 进程与信号---前台进程组

    28.1 介绍 28.1.1 概念 自动接受终端信号的组称为前台进程组 在终端通过 ctrl + c 等动作产生的信号首先被前台进程组接受 在 shell 启动的若干个进程组默认是父进程所在的组为前台 ...

  3. zookeeper.KeeperException$UnimplementedException: KeeperErrorCode = Unimplemented for {root.path}

    1 异常结果 org.apache.zookeeper.KeeperException$UnimplementedException: KeeperErrorCode = Unimplemented ...

  4. Java基础_0305:简单Java类

    简单Java类 简单Java类是一种在实际开发之中使用最多的类的定义形式,在简单Java类中包含有类.对象.构造方法.private封装等核心概念的使用,而对于简单Java类首先给出如下的基本开发要求 ...

  5. 【.net ajax显示后台返回值】

    1..net ajax显示后台返回值 <script>        $(document).ready(function () {            $("#btn&quo ...

  6. 深入理解 RPC

    学习资料 https://juejin.im/book/5af56a3c518825426642e004

  7. cmder使用简介

    简介 cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令. 下载 官网地址:http://cmder.net/ 下载的时候,会有 ...

  8. ROS tf 两个常用的函数

    /** \brief Get the transform between two frames by frame ID.   * \param target_frame The frame to wh ...

  9. [转] netstat 查看TCP状态值

    转自 https://www.cnblogs.com/yuyutianxia/p/4970380.html netstat 查看TCP状态值   一.TCP 状态值 netstat -n | awk ...

  10. SQL Server - SQL语言组成 (DML、DDL、DCL、DQL的区别)

    转载自:https://www.cnblogs.com/dato/p/7049343.html 作者:Dato.zeng --------------------------------------- ...