开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：移动端 App 1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/76/detail/15779
移动端 App 1
内容介绍
一．微信小程序
二．微信小程序代码总结
三．客户端
四．配置
五．React
六．总结
一．微信小程序
如图为一张大三的数据库表的设计，当然我们大三的课是在讲这种设计的缺点是什么，所以我们要换的不是关系型数据库，而是要换图数据库。未来如果有同学要选新系统这个方向，还需要重构一个系统。用户就是 order ，UserID 就是 order 的外界的关联 。
然后它有产品、有数量，实际上这个产品就是我们系统里的 book ，LineItem 与 OrderItem 的结构是一模一样的。
这个程序里面，微信里所有的东西都必须是四个文件，哪怕这个地方只是一个共用的构建，也是这样的。
所以我们现在看到的这个上面的广告栏，它也是这样来的，这个 JS 文件有配置、有页面，他的意思是，在你给的这一组 URL 里面，我用的是微信提供的、在 Swiper 空间里面。
Swiper 指的是这个整体，总共有四张图片，每一张都是一个 swiper item， 所以对着里面的每一个，用一个 block 来展示并且显示 swiper item ，每次展示一张图片，就是按照 index 来展示，到底是 URL 数组里面的哪一个。
在默认的情况下，它的 index 是零。然后，每发生一次变化，它就改写这个 index ，这就是 swiper change ，即在每一次需要换一个页面的时候触发这个动作。
然后再回到 books ，这是跑马灯，它上面的是广告和搜索，跑马灯就是四张图片来回换。再往下就是广告语，那这条广告语又是一个 market content 这种 class 的 view ，这个也是微信里面定义好的，可以直接用。然后再往下是书籍的，书籍的页面可以上下推，这个数据是从后台拿的，然后就是微信里的 for 在遍历 books 的每一本书，把里面的每一项拿出来赋给 book 。然后，你在底下要展示的就是微信的 image ，我的数据就是来自于 book ，然后就把book 的 image 属性取出来去展示一下，底下是book的内。
那么books 在哪里呢？就在这里，一开始它就是空的，然后它的数据是从后台拿来的，是如何拿来的呢？
如图，通过这个请求，它到 getBooks 这边去把数据拿回来，这是它的一个逻辑。如果这个用户是没有登录过的，就会把他导航到登录的页面；如果他是登录过的，那它就进入到微信小程序里面。
如图，如果这个（ app.globatDate.userLogged ）数据我没处理，那么它在哪里呢？就在这个 APP 、在 JS 里面，一上来它就会去做一些事情，实际上你在创建出来这个小程序之后，不需要做什么修改，它会自动的去获取信息，否则，你这个小程序就会跑不起来，你一定要登录到这个微信里面去才可以跑起来。
然后，图中的程序是把书籍的页面全部展示出来了。
再往下是底边栏，它是用 tabbar 来实现的。 tabbar 里面就会有四个选项，到底哪一个选项被激活呢？
默认情况下，我们看到是商城，当你在上面这四个选项上的某一个去点的时候，它会调一个 onChange 。
那么像 onChange 这些方法是怎么实现的呢？在这里，他会把图中相应的内容给替换。如果它只替换这个 value ，底下就会没什么动作，所以你现在点是没有什么用的，也就是说这是它画出来的内容，你知道在这一边，实际上，当你点的时候，就会到另一边，到 JS 事件里面就可以去处理它了。
当你具体点一本书的时候，就会跳到如图这个页面，其实它不是一个页面，而是一个遮蔽罩。这个遮蔽罩就像一个弹在外面的浮窗，然后
这个遮蔽罩里面的内容：上面是一个 book.image 它是用这个显示的，底下就是四个选项，它们被放在一个叫 good action 的里面，这也是微信提供的空间，然后里面就会有相应的东西。这些图标都是微信默认提供的，即客服、购物车、加入购物车、立即购买这四类，前两个是图标类，后两个是按钮类。不管怎么样，你点击每一个都可以触发事件。
前面两个是 onClickIcon ，后面两个是 onClickButton ，可以看到它们两个的差异。
先看一下代码，当你看这个 button 的时候，它会显示一个内容，“别买了”。如下图所示。
然后它就会把遮蔽罩关掉。如果是点这边的 icon ，即上面的（ onClickIcon ），它仍然是 showToast ，但是写的内容不一样（如下图所示）。
这就是这个页面的结构，看到的功能基本上都能在这里面实现。这是我们讲的微信小程序的一个例子。总结来看，微信小程序的每一个页面都分解成了四个部分，然后整个系统的入口，在 APP 这里是有一些这个页面的全局性的配置，包括样式、依赖关系，还有 JS 。其实你创建出来的内容是不需要修改的，它会默认的去起里面的内容。不论你有没有登录，这些内容都在里面，它会默认的去做刚才的动作。实际上之所以能跳到 index ，不是靠 APP 去创建什么东西，而是在这个 APP Jason 里面，在这个配置里面罗列出来的所有页面中index 就是首页，它是这么跳到这里（首页）的。每一个页面都是四个文件，你的文件内容里面可以嵌其他的控件，这些控件仍然是四个文件构成的。也就是说，微信的小程序和 react 或者 view 没有什么差别，我们上节课讲这个PPT的内容中也提到过。实际上，它就是在鼓励你构建式开发，如果你开发的好，可以比助教、企业的代码更好一些。因为对于底下这些，我全部都可以开发成控件。
然后像我的book.wx.ml ，或者这里面的后面的东西（如图所示），你每一个都可以开发成独立的组件。将来你的页面实际上就是一堆像跑马灯这样的用法的，几个不同的组件罗列起来的，组件化的程度会更高。
事实上，它整个的开发和 react 或者 view 没什么差别。从这里面你也可以看到一点，即为什么你在做这个开发的时候，无论是哪个框架，它都强调逐渐开发，逐渐开发的一个最大的好处就是复用。你在这里可以跑一个跑马灯，也可以在下面再加一遍跑马灯。总之，复用这个概念是非常重要的，你不能跳出复用的这个范围去考虑问题，你的代码必须要去复用，最小的复用单位就是变量，然后是函数，大的就是类，再大的就是几个类构成的控件。这是这个微信小程序的一个例子， APP 的 ID 就在 project conflict Jason 里，所以，如果要把我们的代码拿去跑，
不仅要把这里（ “appid”:wx0e117e14a53f6989 ）改掉，改成自己的，而且有可能你用的 “LibVersion” 的版本不是这个版本，跑起来可能会出一些错，那你可能要稍微修改一下，因为我们当时开发的时候是在这个版本上做的，后来好像有更新，当时是按新的版本做的，所以会有一些差异。
在这个过程当中可以看到，实际上一直跑的就是这一个后台，没有做其他动作。所以刚才看到的前台在跑之后通过 POS 请求发送过来的， Loging 的这个动作，他在这个参数里面才会有这种 username 或者 password ，这种东西才能取出来，剩下的都是在后台做的，来验证这个用户的身份，所以我们看到的后台始终是一个。也就是说，你未来再去写前台的其他东西，比如说再写 APP ，再写微信小程序，写移动端的 APP ，包括写浏览器的 PC 上的前端，后端都应该用这一个，这是有关微信的东西。
二．微信小程序代码总结
我们回顾一下这个代码，首先每个页面是四个文件，然后 app.js 是开头的即程序入口，有一个全局配置（ -app.json ），然后里面有用到一些依赖、全局性的样式， index 是主页，进来之后里面有密码，实际上就让你在这个地方输入用户名密码，这是登录的。
然后讲了 JS 里面把用户名和密码是如何设进去的，如何访问这个页面，拿到这个结果后让它跳转到这个 books 页面，然后 books 里面用到了走马灯。
如图为它的页面结构代码。
这个是页面的遮蔽照的代码，即点一本书之后弹出来的东西，我们也写到了这里（如上图）。然后 books 讲的单独一本书的一些信息。
工程里有一个 util.js ，它写了一些工具类的方法或者函数。要注意的是，代码写完之后，如果你要想发布，真正让别人在微信里能使用，还需要提交上去审核一下，否则，你的代码只能在这个浏览器里，就是在这个模拟器里去跑。一定要把你的代码在注册的那个网站上提交，审核通过后就能发布，这样你才算是把这个事情开发完。当然我们不要求大家去做审核这个动作，在仿真器里面即集成开发工具里面仿真运行就行了。这里面提到了一些需要注意的点，如果你们在开发时候踩到了这些坑，要注意一下，然后详细的内容可以再去看看微信小程序的开发的这些文档。
微信小程序开发文档
-https://developers.weixin.qq.com/miniprogram/dev/framework/
微信小程序开发者社区
-https://developers.weixin.qq.com/
需要注意的点
l 发布时候需要填入自己服务器的域名
l 开发过程中把域名检测关掉，否则 wx.request 发不出去
l 微信开发工具->工具->项目详情
三．客户端
我们接下来讲手机端的 APP 的开发 。对于 APP 的开发，我先提一个非常懒人的方法。这是一个框架- CORDOVA ，它是一个开源的框架，它允许你把相当于 HTML5,CSS3 和 JavaScript 这些写好的东西放到它里面，去跨平台跑。所谓跨平台跑，就是你可以在安卓上跑，可以在 ios 上跑，为什么说 CORDOVA 是懒人方法呢？我跑一个 CORDOVA 的东西。
大家在做移动端开发的时候，如果你要跑这个 ios 的，需要有Xcode ，就是这个开发工具，还要有 Xcode 上面的模拟器（如下图所示）。
如果你要跑安卓的，要装安卓 studio ，装好之后用安卓 studio 去启动。你还可以在这个 idea 里面去开发 JavaScript 的东西，你在安卓 studio 里面必须要用它指定的这种开发方式，比如你要写 Java 的代码，你仍然可以在这个 idea 里面去跑你的安卓的仿真，比如这里我把 Login 跑起来（如上图所示），这个后台我还没停，所以它应该是能够登录进去的。
跑起来之后，它就能进去，这些数据就是从后台刚刚抓的（如图所示）。在这个浏览器里面，你可以模拟。因为它是苹果的手机，所以鼠标点住以后往上拉，然后随便点一本书就能进入这个书的主页。为什么它是一个懒人方法呢？ CORDOVA 这个程序是从哪来的呢？就是我们把之前 react 的前端，就是在浏览器上跑的那个前端编译了之后做了一个动作，就是你拿 React 的工具跑一下，跑完之后把它放到 CORDOVA 里面，方法就是把跑完之后的 build 里所有的东西直接抛到 CORDOVA 工程里面的3 W 目录里，然后它就能跑了。当然这个方式不是特别好，因为这个交互会有一些问题，就是可能你写的这种方式在 CORDOVA 里面不是完全能跑起来，有些功能可能还是会有点问题，所以这个框架就不想讲了，因为我希望大家不要用这个东西。
但是这里面有一些东西，在 react native 里面我们还在讲，就是你要配很多东西，如果用 CORDOVA 则需要做相应的处理。更重要的难点不在 CORDOVA ，而是你怎么能在里面去激活安卓或者是 iphone 的这种仿真器，这种仿真器应该怎么跑。
React native 的例子
我们来跑一个 react native 的例子。实际上你默认了跑起来的一个例子，即创建一个 react 例子之后，你再跑比如 oppo 这个安卓的版本，或者 ios 版本，它要能把这个仿真器跑出来，然后要在上面，然后跑出这个效果（如下图所示）。
我们跑的时候就让它在 iphone 的访真器上跑，当你跑这些东西的时候，可能机器会非常烫，因为它的消耗比较大，同一个项目如果在安卓上跑，你要能把安卓的仿真器给跑出来，就是要把安卓的手机模拟器弄起来，然后在上面去跑。
它部署过来，就是能看到同一个工程在两个不同的手机端上跑（如图所示）。如果看一些细节，就可以看到这两个手机的屏幕的长宽比是不一样的，但是它跑出来，就可以看到它本地化的适配比较好，比如如果它比较宽，就会多显示一个 u ，那它的屏幕适配都还可以，你可以点住它上下拖动。要想做移动端的开发，第一步，先要能把这套东西跑起来，就是你装好安卓 stdio ，它在你的 idea 里面能去触发、能跑起来、能把工程部署进去，这是第一位的。然后，如果你用的苹果手机，同样一个工程，要能在这个 ios 上面、 Xcode 这个ios 模拟器上跑，就是你真正要把这个调控，需要做一些工作，具体的步骤，我们在 react native 的那个 PPT 里面是有写的。但是你在做的时候需要仔细一点，只要稍微差一点，它都有可能会出错。
这里面它适配的地方有很多细节。举个例子，图中这两句话，它们在不同的手机上，显示的内容是有差异的，他需要和这个手机的环境去匹配，这是官方给的 react 的例子里面出现的。那我们也写了一个 react 的例子，也是前端在访问 Book ，所以我们用 React native 会更符合将来的要求。按照这个框架来讲，不会专门讲 CORDOVA ，因为 CORDOVA 其实是个偷懒的方法，你把 react 的东西编译好之后直接扔进去，即你原来写的 PC 端的东西扔进去，但是扔进去之后，在安卓和 ios 上能否完全跑起来，还需要自己试一试，因为里面确实有一些坑，比如在这里你可能有些地方要特别注意一下（如下图所示）。
虽然看起来很简单，最后只需要把 build 这个目录直接扔到3 W 这个目录里，但实际上，跑起来的话还是需要注意。
如图，这是刚才看到的在 ios 上跑起来的样子，主要是有这三个页面，那认证和需要输入的数据确实都是从后台抓取过来的。所以后台始终只有一个，前端要有这些东西。涉及到移动端的开发，至少你要能在安卓上跑起来，如果你没有苹果的模拟器，那么在安卓上面一定能跑，因为安卓的这个 studio 在苹果上能装，在其它机上也能装。CORDOVA 虽然比较简单，但是还是有些问题，如果你碰上了下面这些问题，就去仔细看一看。
l Apache Cordova
-https://cordova.apache.org/#getstarted
l Idea 开发 cordova 项目
-https://biog.csdn.net/u010375456/article/details/81172648
-https://github.com/nodejs/node-gyp/issues/569
l Ios-depoly
-https://github.com/ios-control/ios-deploy
l Cocopods
-https://cocoapods.org/
l Mac 下 Android SDK 配置环境变量的配置（如 adb）
-https://blog.csdn.net/maoxinwen1/article/details/80113470
l 用 Cordova 把 react app 打包成原生的 IOS 项目
-https://www.jianshu.com/p/4b54366897c7
四．配置
真正的这个配置在哪呢？我们拿 react native 来讲。你按照这个步骤要去做，一个是在配 ios 的环境，如果是一个苹果的机器（如第一张图所示）；一个是在配安卓的手机的环境，要装很多东西（如第二张图所示），装完东西之后，安卓 studio 还要再去配你的环境文件，图中写的这些都是在麦克 OS 上做的。也就说如果是你用的是Linux ，比如班图中的这些指令，它们是类似，如果是 Windows 可能会有点差异，但是问题不大，就是相应的概念应该是差不多的。但是这个安卓 studio ，它有一个坑是在哪呢？就是它现在只能支持到 JDK8 ，所以没有办法在当前的机器（比如 JDK13 ）上跑不通。它的手册上说只能支持到 JDK8 ，装了8之后，跑这个工程的时候指向 R 这个目录，它就能跑。安卓的会比较难配。 ios 的会比较好配，但不是所有人都有这种机器。安卓配起来会有点麻烦，比如它要设计环境变量等等，但是它对机器没有要求，任何一种机器都能跑。如果是一个苹果的机器，最好是两个都能跑起来，你两个浏览器就用两个模拟器，可以同时跑。这个配置确实比较费时间，而且在配的时候可能会碰上各种各样的坑。
五．React
我们谈谈 react ，我没有写代码，我们看一下官网。官网上是这样的（如图所示），它里面给了很多例子，这个例子可以怎么跑呢？首先它看起来很像 react ，其实它就是 react 的框架，只不过它里面有一些自己的标签和它的一些路由的逻辑，它不能像 Windows 一样的把页面来回跳转，像我们上节课讲的微信一样，它那个页面是堆叠式的，就像你在一个站，然后一层一层往前翻的。除此之外，它和
React 很像。我们看一下它是如何跑的，鼠标单击之后，它跳到一个网站，进入网站后，可以看到它带 web ，安卓和 IOS ，3种展示形式，也就是说，你在这三个里面都能跑。你点 web ，它就是 web 。就相当于你在页面上看到内容。你点安卓就会开始运行，然后点 ios ，再点 Tap to play ，它就会跑出来效果。这是在安卓上显示的，它会加载一下，然后显示这个内容（如下图）。
在 ios 上点一下 Tap to play ，他有一个排队队列等待的问题，就是有很多人同时在线在跑这个东西。还要等一下，等到1和0的时候，才能看出来效果。变成1后，它再变成0，就能看到它跑了。
加载后它就出来这个效果（如下图）。
你在 React 这个工具上以及它的官网上，所有的这些例子全都可以这样跑，单击例子之后就会出现网站，你在几个当中来回跑，它就可以出现你想要的效果。所以我没有在做例子，因为官网上的例子可能比我做的一堆例子，要看起来更直观。
然后我们可以回头再来看， React native 是怎么跑的，一些主要的理念是什么？ React native ，实际上它用的就是 react 的东西，它也是 input react 等等，只不过 react 面向的是 web ，所以它眼里看到的都是 htiml ，比如 h1,div 这样的东西。 React native 它面向的是手机，它的里面不是这种标签，它不仅要面向手机，而且有一个问题，即安卓和 ios 它们两个之间的叫法不太一样，所以它自定义了一套标签，这套标签在做不同手机上的适配，翻译成不同手机上的标签。总的来说，它就是 React 的东西，它就用 React 的这些控件来展示页面和处理这个行为。所以编译完之后，就是有一个可复用的 bundle ，你写的东西实际上被编译成了一个大的 JS 文件，它可以去使用。
它的标签不一样，是什么意思？举个例子，这是一个示意，左边是安卓的机器，右边是 ios 的机器，如果你开发了一个程序，它就会显示这样的内容，每个安卓都有它会显示的方案，比如这一排按钮它在上面，对于 ios ，它会出现在下面。如果映射到代码里可以看到，上面一部分阴影里出现的就是安卓的叫法，它说这个页面上是一个 ViewGroup ，里面会有一堆的 view ，比如 ImageView 就是显示图标， TextView 是显示名字。如果这件事情映射到 ios 的世界里面，就是 UIview ，里面的这些东西叫 UIImageView ，UITextView。如果写两套东西，肯定不合适，所以这个 React native 说，我把它统一一下。然后你到不同的浏览器，到不同的仿真器里去跑的时候，我对你的编译就会不一样。
所以大家注意这样一个细节，就是我在跑这两个仿真器的时候，可以看到我跑的时候，它都花了很多时间去显示，而且它底下都会出现一堆的编译工具。比如这是安卓的，它说编译花了20秒，这边 MS 它编译也花了多少秒，就是它两边要重新再去编译，这个地方就相当于 Java 一样，Java 中你拿不同的虚拟机的 jdk 去编译，它可以编译出不同的操作系统。上面的那些字件码，它也是一样的，你拿这个 JS 写出来的东西，在两个手机上分别跑的时候，它要再编译至少再 build 一下，就相当于做了一次这样的翻译，把它变成本地代码去跑。大的原则，我们先说一下为什么我们要讲这种框架。你不去讲原生的东西，比如 IOS 的 Swift ，或者是 Objective-C ，尽管这个 Objective-C 不经常用；然后 Android 这边用 Java 。如果这样讲，那是否还要再讲一门语言？
而且开发出来这两套东西，如何保证它将来跑出来的效果像图中这样，是一样的？所以，现在流行的方式是用框架， react native 不是唯一框架，但是因为我们用到了 react native ，所以我们选这个框架来讲一讲。正常情况下，安卓是要用 Java 或者 Kotlin ， Kotlin 是一个新的语言，看起来比 Java 更简洁一些。那 iOS 里面就是 Swift 或者 Objective-C 。如果我们真要讲这样的东西，那可能要讲两门或者三门语言，我们这一门课的语言就太多了，所以，既然大家之前都拿 JS 写，就用 JS 做到最好。 React 过来之后就会看到，它会创建一些，分别对应于安卓或者 ios 的这些 view ，这样就可以保证在 ios 和安卓上跑的那个 view 看起来很像，所以我们要用它。当然你也可以去做一些，跟平台相关的，比如安卓独有的东西， ios 可能会跑不起来。如果你真有这个需求，知道安卓手机有这样的特殊的需求，你也可以去用，它不排斥你用，也就是说没有说一定要跑那种两边都可以跑的代码。
然后我们可以对应一下（如图所示），在 react native 世界里面，它的标签不一样。首先就是现在大家都不一样， web 跟 web 也不一样，所以 web 里这些大家主要都用到的标签，在 ios 世界，安卓的世界和 react native 世界里面分别都是什么？ div 是什么？div 就是 view ,对应着安卓里面的 view group ，对应着 IOS 里的UI 。你如果要开发原生的 control view ，或者是 IOS view ，你要写这样的标签。
但是如果你用 react native ，我们就直接写 view 。比如我要显示一段文本 <P> ，就是 <Text> ，就是对应着react native 这边的 text 和 image ，对应到 Android 这边就textview, imageview ，或者是 IOS这边的 UITextView , UIImageView 。然后手机上，它一个特殊的地方就是它能用手上下滑动，那就说明你这个内容很长，需要上下滑动。
在手机上就会有一个滚动的 view ，这个在安卓和 ios 里面也都有，在web 里不存在。它本来就没说，这个页面一定要正好是一屏，它本来就是靠一个很大的 div ，要去做很多的内容，所以它不需要专门有一个 ScrollView 。
我们经常做的肯定是要让用户输入的，这叫TextInput 对应的是之前页面出现的 input ，它是 type= text 这种类型的标签，在安卓和 ios 里都有。我们现在的用 native 的意思就是，我们希望你不要去关心 ANDROID VIEW 和 IOS VIEW，你只需要用最左边的 REACT NATIVE 的这些标签去把你的系统开发出来，然后它经过编译就可以在两种不同的机器上去跑。
在编译的过程中，它还会生成这两种相应的代码，并且它要生成那个安装包，比如这个apk 的安装包，然后把它加载进仿真器，让它真正跑起来。这是我们看到的主要的一些标签。
React native 代码例子
如图，这是一个例子。既然它跟 react 很像，所以看到这些东西本身可能会不陌生。首先它导入 react ，其次在这个例子里面用到了view ，text， ScrollView ，TextInput 等等。所以我要从 react native 里面导入这些东西，这个页面是什么样子的？它跟 react 是一样的，上来之后也需要单击构建，在 APP 里面还要 return 一个东西。
return 的是什么呢？是一个上下可滚动的 view 。这个 view 里面，最上面是 textview ，显示了 some text 。然后，在这个里面，它又嵌了一个 view ，view 就是 div ，实际上就相当于分了一个区。在这个里面显示了 some more text ，因为 view 实际上相当于 div ，它只在分区，所以它在格式上没有什么影响，你能看到有两行格式相同的代码排在这里面（用户页面）。当然，这就取决于你最后如何处理它，比如我们想要你按 CSS Select ，即选中这个标签的方式可能会不一样。然后再往下是一张图，这张图它的 source 是什么，它的 style 是什么，它在这样一个大的用户界面上去展示，然后这个 view 就结束了。实际上这两个（两行格式相同的代码和一张图）在一个 view 里。然后下面是一个文本输入框，这根输入框还可以带自己的样式说明，比如高度多少，颜色是什么。这个输入框边框的颜色是灰的，宽度为1。然后，它默认的就是，当你不输入任何东西的时候，上面不显示东西。
这三样东西和在一个滚动框里就是这样的一个例子（如上图所示，左边为代码，右边为效果）。从这里可以看到，它的基本概念和 react 差别不大，唯一的差别就是用到的标签不同。这个例子就把这五个标签全部都包含了，而且通过 view 这种方式告诉你，这个页面可以怎么分成若干个区域，然后怎么去组织这些内容。这个例子就是在官网上的，你可以在安卓或者 IOS 上面去看它的效果。所以，我们所谓的核心控件应该怎么去理解呢？
首先就是这一些标签，其次它跟 HML 是有关的，它将来就是要能适配到安卓的手机和 IOS 的手机上。它适配的逻辑就是，在编辑的过程当中，他应该产生本地代码。用 apk 的安装包安装到安卓手机上，苹果的安装包安装到苹果手机上，就是需要一个安装包给它放进去。所以他在中间做了这样的一个处理，即走了一个中间路线来把大家的东西统一起来，这就是它的核心思想，而且整个是用 Javascript 的语言来做开发的。
六．总结
所以， react 的东西最多。React native 是它的一个子集，然后在React native里面的核心构建，就是已经给你提供好的那些标签，你还可以去下载第三方即社区里面开发的，别人写好的东西拿来用。就像 input ，你可以导别人的库进去，也可以导 react native 即所谓的核心控件。当然，你还可以写自己的一些库，甚至是自己的，跟 ios 或者安卓绑定的库，即构建，这是它的一个基本的概念。所以你只要会 React ，React native 就没有什么问题。既然它是 React native， React native 本质上来说，就这四个东西。
-components
-JSX
-props
-state
第一个是构建化开发，必须是一个一个的构建。第二，它里面写代码用的是 JavaScript 的扩展，就是 JavaScript 和 HML 混编的语言。第三，有一些 props 是始终不能改变它的值的，这样的一些数据。第四就是在不同的页面之间传递的，可以去修改它的内容的 state 。
本质上来说，一个 react 就这四点东西，这就是它的核心概念。
