简介欢迎开启 React Native 的旅程!如果你在找如何搭建环境的文档,请移步搭建开发环境。 继续往下阅读可了解关于文档结构、原生组件、React等相关的一些介绍。 许多不同类型的人都在使用 React Native:从高级 iOS 开发人员到 React 初学者,再到职业生涯中第一次开始编程的人。这些文档是为所有学习者编写的,无论他们的经验水平或背景如何。 如何使用本站文档你可以从这里开始,像看书一样线性阅读这些文档;也可以阅读你需要的特定部分。已经熟悉 React 了吗?你可以跳过该部分--或者阅读它来进行简单的复习。 预备知识要使用 React Native,你需要对 JavaScript 基础知识有所了解。如果你是 JavaScript 新手或需要复习,你可以在 MDN 上深入学习或复习一下。
交互示例文档中时常会附有一些可以直接在浏览器中运行的交互示例,例如: 上面的示例使用了一个叫做 Snack Player 的工具(我们也会用“沙盒环境”代指)。这是由 Expo 公司提供的专门用于演示、学习 React Native 的交互工具。它集成了 react-native-web 兼容层,会尽可能把 React Native 的代码转化为兼容的网页来运行(当然会有无法转化的情况,那种情况下则必须使用模拟器或者手机来运行)。上面的代码可以直接修改和运行,所以你可以在里面直接练习。试着改下上面示例中的文字看看效果吧!
函数式组件与 Class 组件你可以在 React 中使用函数式组件或 Class 组件。最开始只有 Class 组件能够使用 state ,但自从有了 React Hooks API, 你可以为函数组件添加 state 和很多其它的功能。 Hooks API 是 React Native 0.59 提供的新特性, Hooks 是一种面向未来的编写 React 组件的方式,因此我们在本文档中优先使用函数组件,你也可以点击“Class 组件”切换到 Class 组件代码:
给开发者的提示学习 React Native 的开发者拥有不同的开发背景,你或许有很多技术经验,包括 Android、iOS 等等,我们在编写文档的时候努力照顾到具有不同知识背景的开发者,有些时候我们会专门针对特定的平台提供特定的讲解:
特殊格式我们使用粗体字来描述菜单路径,使用“>”符号连接子菜单,比如: Android Studio > Preferences 现在让我们开始学习 React Native 的基础知识 核心组件与原生组件.
React Native 看起来很像 React,只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构,首先需要了解一些基本的 React 的概念,比如 JSX 语法、组件、 让我们开始吧! Hello World根据历史悠久的“传统”,我们也来写一个“Hello, world!”: 你可以直接在上面的编辑器里改改试试,也可以新建一个项目,然后用上面的代码覆盖你的 那这段代码是什么意思呢?
Then we find the The The first style that we find is The following style is
初看这段代码,可能觉得并不像 JavaScript——没错,这是“未来”的 JavaScript. 首先你需要了解 ES2015 (也叫作 ES6)——这是一套对 JavaScript
的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现,所以目前而言 web 开发中还很少使用。React Native 内置了对 ES2015 标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的 示例中的这一行 组件上面的代码定义了一个名为 这个示例弱爆了!……是的。如果想做些更有意思的东西,请接着学习 Props 属性。或者可以看看一个稍微复杂些的“电影列表”例子。 整理了一下关于 React Native 入门内容,仅供参考,如有问题,还请指出。 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。 React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。 React Native主要特性如下:
React Native主张“Learn once, write everywhere”而非其他跨平台工具一直宣扬的“Write once, run everywhere”。通过React Native,开发者可以使用UITabBar、UINavigationController等标准的iOS平台组件,让应用界面在其他平台上亦能保持始终如一的外观、风格。
JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式,原生模块使用额外线程,开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。
React Native引入了一个类似于iOS上Responder Chain响应链事件处理机制的响应体系,并基于此为开发者提供了诸如TouchableHighlight等更高级的组件。 要学好React Native开发要学习些什么呢?
React Native文档:
系统环境配置:
初始化项目:首先创建一个项目:
稍等一会...
下面这张图内是项目的所有内容: 目录结构.jpeg
以 iOS 为例,打开 index.ios.js 文件,查看一些模板代码,下面是代码和他们的意思:
看到这,你应该也明白了各个模块的作用,接下来我们来了解一些 React Native 开发基础。 React Native 开发基础什么是JavaScript?JS是一个轻量级的,解释型的讲函数视为一级公民的程序设计语言。它是一种基于原型的多范式动态脚本语言,支持面向对象,命令式编程和函数式编程。 声明:
变量、常量:
然后,让Text来显示这个这两个变量
command+R刷新,效果图如下: 效果图.jpeg 常量可以看到index.ios.js文件最下面有类似:
就是一个常量,记住在声明的时候,必须初始化。 数据结构和类型:
流程控制:
这个各个语言大同小异,不浪费篇幅了,有一点要提一下,JS中的Switch Case中可以是String。 有一点要注意,以下值在JS中是会识别为false:
注释:
Promises:
控制图如下: 控制图.png 函数: 函数的定义如下,由function关键字声明,在()添加输入,输入不需要声明类型
我们接着上述的工程,添加一个可点击的
command+R刷新,点击屏幕效果图如下: 哈哈哈.jpeg 这样的方法是定义在全局的,当在类中定义的时候,不需要funciton关键字。
command+R刷新,点击屏幕效果图如下: 类中的方法.jpeg 箭头函数(Arrow functions): 没接触过JS的同学可能会对
这一行感到很奇怪,其实这里onPress是一个函数类型(在JS中,函数本身也是一种类型)。这其实是JS中的箭头函数,它提供了一种更简洁的函数表达方式
然后,commnad+R刷新,可以看到两个log的内容是一样的。也就是说,(s)用来描述参数,=>后的表示方法的执行体。如果学过Swift的话,会发现和Swift的闭包很像。 数组: 可以由以下三种方式创建数组,访问数组的方式还是通过角标来访访问:
数组有一些方便的方法,例如合并,排序,检索等,可以在MDN上找到 字典Maps:
对象: JS中的对象的属性可以不先声明,而在运行时候动态添加,例如
所以,在React Native中,写代码的时候,存储数据直接this.propertyName =即可。 这里推荐一个不错的JavaScript教程。 React Native之Flex布局Flex又叫弹性布局,会把当前组件看做一个容器,所有子组件都是它容器中的成员,通过Flex,就能迅速的布局容器中的成员。 Flex主轴和侧轴:
如果主轴选择的是水平方向,那么子组件默认就是水平布局排布,侧轴就是控制子组件在垂直方向的布局。 flexDirection属性:
flexWrap属性:
justifyContent:
alignItems:
如果侧轴垂直,决定子组件在上,还是下,或者居中。 alignSelf:
当某个子组件不想参照默认的alignItems时,可以设置alignSelf,自定义自己的侧轴布局。 flex属性:
想要看详细的代码加图片讲解戳这里React Native之Flex布局 ReactNative之CSS布局ReactNative支持CSS中的布局属性,因此可以使用CSS布局属性 视图边框:
尺寸:
外边距:
注意: 内边距:
相对定位和绝对定位:
想要看详细的代码加图片讲解戳这里React Native之CSS布局 React的基础知识React:
React.Component:
Component 相关对象方法:
生命周期:
推荐一些RN学习资料: |