前言

大前端貌似已经是一种趋势了，现在开始入坑RN。以后会把填坑的过程记录下来，分享给大家。
声明一下,本文不属于零基础学习,如果遇见不懂请自行学习相关知识。
复制代码

环境搭建

请参考官网：https://reactnative.cn/docs/0.51/getting-started.html#content（文档）
如果你不习惯看文档，也可以观看视频http://study.163.com/course/introduction.htm?courseId=1003848134（整套课程是收费的，不过环境篇是免费的）
复制代码

编译运行

废了九牛二虎之力，终于把环境配好了，很激动有木有？emmm…… 问题接踵而至
来来来，我们一起看看这个工程吧！首先执行操作如下：
复制代码

react-native init HelloWorld #新建一个叫做‘HelloWorld的工程’

cd HelloWorld #进入这个工程

react-native run-android #使用android环境编译

如果出现下图：
复制代码

请不要紧张，这张图表示你的编译已经成功了，由于你没有连接android机器，导致apk安装失败了（具体请看红色的英文提示）。
然后我们接上手机，重新执行
复制代码

react-native run-android

安装成功后，你就会看见下图：

说好的‘HelloWorld’哪里去了？别着急，请先注意这一段英文：
'Double tap R on your keyboard to reload,'Shake or press menu button for dev menu'
翻译一下：双击键盘上的R键来重新加载，摇晃或者点击功能按钮来打开开发菜单   再翻译成人话一点儿，就是你修改了代码（目前只修改了Js代码，至于原生代码修改我们先不涉及），不用每次都去编译，双击R或者调出菜单点击重新加载就可以看到最新效果了。What is the fuck？点击reload出现了如下提示：
复制代码

这是嘛情况呢？
别慌，人家提示写的很清楚‘Could not connect to development server.’
赶紧检查一下你本地那个node.js窗口是不是被你关闭了？
执行：
复制代码

react-native run-android

就可以重新打开下面这个服务了：

小知识点：

这里先简单的提一些，能理解多少算多少吧！node.js这个界面，其实是打开了一个本地服务，占用了8081端口。
这个服务干嘛用的呢？它其实让app去更新你的js代码，你每次reload的时候，就是通过服务在更新js文件，如下图：
复制代码

项目工程简述

环境什么的都弄好了，大家都急于自己的‘HelloWorld’。按照以往的经验，打开android目录找到MainActivity上手就开始改了，然后…… 对，没有然后了！
来来我们一起简单看一下项目结构吧！
使用软件：WebStorm
复制代码

1、android目录是用来调用android本地化组件的暂时不用研究（同理ios目录）
2、node_modules目录，是rn的代码组件
3、index.js索引，程序加载的入口
4、package.json工程配置文件（类似AndroidStudio工程的build.gradle文件）
5、app.json项目信息文件
6、App.js 这个就是你看到的展示界面（‘HelloWorld’就在里面改）相信凡是有过一定编程基础的人，都会改出自己的‘HelloWorld’！
复制代码

总结

其实走完上述步骤，已经完成了初体验。怎么说呢？一句话，要学的知识还有很多！复制代码