《ReactNative系列讲义》
关注
分享
扫一扫
文章平均质量分 68
分分钟带你掉进ReactNative这个比黑洞还深的坑。想出来？呵呵，晚了！！！
蜗牛慢慢跑
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
《ReactNative实战讲义》Redux框架篇---（四）高级应用
| 版权声明：本文为博主原创文章，未经博主允许不得转载。Redux框架篇系列文章总目录： 《ReactNative实战讲义》Redux框架篇—（一）基础知识 《ReactNative实战讲义》Redux框架篇—（二）基础应用 《ReactNative实战讲义》Redux框架篇—（三）高级知识 《ReactNative实战讲义》Redux框架篇—（四）高级应用一、简介上篇文章...原创 2018-01-25 15:36:00 · 801 阅读 · 0 评论 -
《ReactNative实战讲义》Redux框架篇---（三）高级知识
| 版权声明：本文为博主原创文章，未经博主允许不得转载。Redux框架篇系列文章总目录： 《ReactNative实战讲义》Redux框架篇—（一）基础知识 《ReactNative实战讲义》Redux框架篇—（二）基础应用 《ReactNative实战讲义》Redux框架篇—（三）高级知识 《ReactNative实战讲义》Redux框架篇—（四）高级应用一、简介Redu...原创 2018-01-24 22:30:05 · 520 阅读 · 0 评论 -
《ReactNative实战讲义》Redux框架篇---（二）基础应用
| 版权声明：本文为博主原创文章，未经博主允许不得转载。Redux框架篇系列文章总目录： 《ReactNative实战讲义》Redux框架篇—（一）基础知识 《ReactNative实战讲义》Redux框架篇—（二）基础应用 《ReactNative实战讲义》Redux框架篇—（三）高级知识 《ReactNative实战讲义》Redux框架篇—（四）高级应用一、简介在上一篇...原创 2018-01-24 22:17:17 · 421 阅读 · 0 评论 -
《ReactNative实战系列》Redux框架篇---（一）基础知识
| 版权声明：本文为博主原创文章，未经博主允许不得转载。Redux框架篇系列文章总目录： 《ReactNative实战讲义》Redux框架篇—（一）基础知识 《ReactNative实战讲义》Redux框架篇—（二）基础应用 《ReactNative实战讲义》Redux框架篇—（三）高级知识 《ReactNative实战讲义》Redux框架篇—（四）高级应用一、简介今天给大...原创 2018-01-17 10:34:03 · 847 阅读 · 1 评论 -
《ReactNative实战讲义》Flux框架篇---Flux框架应用
| 版权声明：本文为博主原创文章，未经博主允许不得转载。三、登录功能封装1. 创建Api.js文件封装POST请求方法function _doPost(url, formData) { return new Promise((resolve, reject) => { fetch(url, { method: 'POST', h...原创 2018-02-27 23:21:13 · 348 阅读 · 0 评论 -
《ReactNative实战讲义》Flux框架篇---Flux框架基础
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、基础概念介绍1.register(function callback):string注册监听器，用于监听任何的dispatched payload2.unregister(string id)取消某个dispatch的监听3. waitFor(array ids):void可以使当前执行的dis...原创 2018-02-27 23:19:46 · 379 阅读 · 0 评论 -
《ReactNative实战讲义》React-native-router-flux框架篇---页面跳转与传值
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、内容简介实现以下功能： 1. 正向跳转 2. 正向跳转并传值 3. 反向跳转 4. 反向跳转并传值 5. 指定页面跳转 6. 指定页面跳转并传值二、代码实现1、正向跳转假设情景：从Home页跳转到Profile页面，Profile场景的key值为profile不带参数 Actions.prof...原创 2017-05-02 14:16:50 · 16059 阅读 · 2 评论 -
《ReactNative实战讲义》react-native-router-flux框架篇---刷新当前页面的属性
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、内容简介给NavigationBar左上角或右上角添加点击事件二、代码实现使用到的框架属性leftTitle：左上角按钮的名字onLeft：左上角按钮的点击事件rightTitle：右上角按钮的名字onRight：右上角按钮的点击事件其他属性也可进行刷新eg：componentDidMoun...原创 2018-02-27 23:25:45 · 1923 阅读 · 0 评论 -
《ReactNative系列讲义》高级篇---05.react-native-vxgplayer ReadMe
| 版权声明：本文为博主原创文章，未经博主允许不得转载。Install 安装npm i react-native-vxgplayer –saveImport 导入Android Studiosetting.gradle include ':react-native-vxgplayer'project(':react-native-vxgplayer')...原创 2018-01-04 11:00:14 · 398 阅读 · 0 评论 -
《ReactNative系列讲义》高级篇---04.制作npm插件并发布
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介npm组件制作完成，下一步需要提交到npm服务器。这样，无论是自己还是其他开发者，都可以通过npm命令进行组件的安装。二、流程1. 创建新文件夹创建新文件夹（独立的）react-native-vxgplayer2. 创建新目录react-native-vxgplayer文件下创建新路径and...原创 2018-01-04 10:57:35 · 722 阅读 · 0 评论 -
《ReactNative系列讲义》高级篇---03.编写npm组件
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介ReactNative Android版的发布已有两年多了，RN官网的迭代速度也是相当之快，给广大开发者提供的API也相当丰富了，但是官方给出的API也只能是共有功能或者是常用功能。但实际中，每款APP都会根据自己的产品需求开发一些特有功能。这篇文章就通过一个支持RTSP协议的摄像头功能组件，给大家介绍一下如何制作个性化的...原创 2018-01-04 10:54:53 · 876 阅读 · 0 评论 -
《ReactNative系列讲义》高级篇---02.JavaScript与Native之间的通信（二）
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介上篇文章介绍到功能组件的封装，JS端和Native端之间的通讯相对来讲还是很简单的，今天我们介绍封装UI组件以及JS端和Native之间的通信方式。1. 创建CustomImageView类// 创建自定义Viewpublic static class CustomImageView extends Vi...原创 2017-11-13 22:22:33 · 563 阅读 · 0 评论 -
《ReactNative系列讲义》高级篇---01.JavaScript与Native之间的通信（一）
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介随着项目功能的多样化，复杂程度逐渐的增大，就会出现ReactNative官方API中有些组件无法满足产品需求，那么我们就需要自己来定义我们产品特殊需求的组件。 组件又包含功能性组件和视图组件；功能性组件中大部分都是用户通过点击之类的触发JS端调用Native组件功能，触发类型与操作方式相对简单，因此JS与Native之间...原创 2017-11-13 22:11:12 · 730 阅读 · 0 评论 -
《ReactNative系列讲义》进阶篇---06.FlatList（三）
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介截止到上篇文章，关于FlatList无论是简单的还是高级的属性用法都已经介绍完毕，今天我们一起来看看FlatList更高级的玩法，相关方法的调用。二、基础知识获取FlatList的引用scrollToEnd：直接跳转到内容的底部，建议设置getItemLayout属性，不然会出现卡顿scrollToIndex...原创 2017-09-06 23:37:30 · 8868 阅读 · 2 评论 -
《ReactNative系列讲义》进阶篇---05.FlatList（二）
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介上篇文章中我们了解到了FlatList组件的基本用法，其实FlatList还有很多丰富的功能，可实现更多更灵活的业务需求，接下来让我们一起来看看吧~二、基础知识支持单独的头部文件// Header布局_renderHeader = () => ( <View><Tex...原创 2017-09-05 21:51:46 · 4461 阅读 · 1 评论 -
《ReactNative系列讲义》进阶篇---04.FlatList（一）
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介FlatList，平面列表。应用场景一 般是有大量的数据一条一条的罗列出来。这些数据的属性相同，但是内容不一样。那现实中究竟是怎样的一种情景呢，下面我们一起来看看FlatList的基本用法。二、基础知识1. FlatList有哪些特性？支持跨平台（同时支持Android和IOS等平台）支持水平布局...原创 2017-09-04 21:54:37 · 2642 阅读 · 0 评论 -
《ReactNative系列讲义》进阶篇---03.Modal
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介项目开发中，总会遇到弹出窗，弹出窗的功能可能会是确认、单项选择、多选、提示等等，一般情况下我们想要的效果通常是在当前页面触发事件，弹出遮罩层，并不会完全覆盖掉当前页面，当前页面处于部分可见，而布局的焦点处于遮罩层上，一般可见布局位于中央部分，本篇博客带大家制作一个单选框的Modal二、思路整理定义需要的属性，定义属性...原创 2017-07-10 17:38:59 · 576 阅读 · 0 评论 -
《ReactNative系列讲义》进阶篇---02.自定义机场选择列表 AirportListView
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、内容简介对于拥有国外市场或者通讯功能的APP来说，通过列表展示选择自己需要的数据是很常见的功能模块，例如：通讯录，选择国家等等。这类组件的实现原理基本一致，本篇文章带大家实现一个机场的列表选择模块。 目前只实现了最基础的首字母定位查找功能，首字母分组功能，后期会加上模糊查询，热门城市推荐。技术点总结ReactNativ...原创 2017-05-17 15:00:46 · 783 阅读 · 0 评论 -
《ReactNative系列讲义》进阶篇---01.自定义单选对话框 SingleChoiceDialog
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、内容简介在我们日常的开发中经常会遇到以Dialog对话框的形式，进行单项选择的操作，例如：选择性别，选择语言等等。在这篇文章中，我们以翻译工具的选择语言功能为例，编写单项选择插件。 大体思路如下： 以ReactNative官方提供的Modal组件为核心，通过定义插件所需要的属性(props)，封装出SingleChoiceDi...原创 2017-05-16 10:46:03 · 1764 阅读 · 0 评论 -
《ReactNative系列讲义》进阶篇---07.Refs
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介有时我们需要组件的非典型数据或者方法，并不是以属性的方式出现，而是通过组件的引用调用。一般常见的使用场景有：管理焦点、文本选择、媒体播放、触发必要的动画、合并第三方库等等。下面让我们通过几个简单的demo来认识一下refs。二、基础知识ref是组件的一个特殊属性，任何一个组件都带有该属性。ref属性通过call...原创 2017-09-07 21:56:32 · 564 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---08.Networking
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介几乎所有的应用都需要和服务器端进行交互，以此从服务器端获取各种数据。RN中网络请求简单明了并且支持多种请求方式。下面让我们一起看看官方标准的网络请求方法（fetch）如何使用。二、基础知识fetch方法支持GET和POST请求方式第一个参数输入URL，第二个参数用来自定义HTTP请求，添加自定义的请求头或者PO...原创 2017-08-31 21:46:54 · 413 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---07.Handling TextInput
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介学完了数据控制，学完了设置样式，也学完了事件的处理，今天我们来学习第一个交互性组件：TextInput。该组件的应用过程中会使用到上面所有学过的知识，因此该组件也算是一个综合应用知识的案例。二、基础知识基础属性：onChangeText 获取用户输入的内容，方法类型的属性（callback），用户输入的数据会以参...原创 2017-08-30 21:24:40 · 339 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---06.Layout and Flexbox
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介上一篇中介绍了组件尺寸的定义方式，今天聊聊组件位置的定义方式。首先是在父组件中确定子组件的布局方式，然后选择子组件在主轴上的排列方式和次轴的排列方式。Flexbox的设计初衷是为了使布局适应不同尺寸的屏幕。除个别例外，其他的方面都和CSS中的思想保持一致。二、基础知识flexDirection：决定主轴的布局...原创 2017-08-29 18:31:04 · 625 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---05.Style and Flex
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介每一个核心组件都自带一个style属性，用来添加组件的样式，比如字体大小、颜色、排列方式，组件的布局方式、位置等等。下面让我们一起来学习一下style样式的基本用法。二、基础知识style属性名称和CSS一样，只不过命名规则使用驼峰法。style属性最简单的方式是JavaScript对象类型，也可写成数组类型；...原创 2017-08-28 21:37:52 · 508 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---09.Conditional Rendering
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介前面几篇文章介绍了React的数据类型和组件的概念，因此我们知道在开发时，我们可以将一些功能拆分出来，哪怕很小的功能，都是可以拆分出来的。当我们使用的时候，会根据状态值来判断我们需要加载哪一部分组件，不加载哪一部分组件。今天，我们就一起来看看根据条件渲染UI组件。 React中根据条件渲染组件的工作原理和JavaScri...原创 2018-02-12 20:31:24 · 325 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---04.Handling Events
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介学完了数据，接下来我们学学方法的创建与调用，以及触发方法的载体。二、基础概念1. 触发Event事件的载体ReactNative组件：Button, Touchables（包括：TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, ...原创 2017-08-26 23:32:39 · 470 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---03.State and Lifecycle
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介上篇文章中我们一起学习了Components and Props，知道了ReactNative中两个基本概念：组件和属性，并且知道了两者之间的关系和使用方法与特性。这篇文章我们一起来认识一下ReactNative中的第二种数据类型：State。 State数据类型应用范围在组件内部，并且可依据需求实时变化并改变UI。...原创 2017-08-25 22:22:03 · 524 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---02.Components and Props
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介Components能够让你将UI独立分开，碎片化并重复使用。今天我们通过学习ReactNative中的数据类型来看看如何创建独立的UI Components。RN中控制组件的数据类型有两种，一种作用于组件间，叫做Props；一种作用于组件内部，叫做State。这篇文章我们先来学习一下组件间数据类型Props，也正是因为有...原创 2017-08-24 22:32:20 · 476 阅读 · 0 评论 -
《ReactNative系列讲义》基础篇---01.JSX
| 版权声明：本文为博主原创文章，未经博主允许不得转载。一、简介JSX属于React的基础概念，是JavaScript的延伸部分，正是JSX创造了React的元素。通俗的来讲，JSX类似于Web端的DIV等标签，用来描述UI该是什么样子。但是和HTML还是有一些差别的，因此我们需要重新来学一下这门新的标签语言，如果有熟悉HTML标签语言的朋友可以在学习JSX时类比一下HTML，看看到底...原创 2017-08-23 22:28:34 · 499 阅读 · 0 评论