React-Native入门(1)-项目工程初识

269 阅读3分钟

前言

大前端貌似已经是一种趋势了,现在开始入坑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’!

总结

其实走完上述步骤,已经完成了初体验。怎么说呢?一句话,要学的知识还有很多!