手把手教你React Native 实战之开山篇《一》

先说一下我为什么学习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

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

技术