12 2019 档案

摘要:一、简介 在前面介绍Text组件时,我们将其封装过列表组件,用来显示大量的数据。ReactNative中对于大量数据清单列表展示的需求,有提供可用的列表组件,FlatList组件就是其中之一。FlatList组件的功能非常强大,既可以展示和增删数据,也可以支持下拉刷新和上拉加载,跟iOS中的UITa 阅读全文
posted @ 2019-12-31 18:19 XYQ全哥 阅读(914) 评论(0) 推荐(0) 编辑
摘要:一、简介 在App中,时间选择器使用的场景还是比较多的,例如选择外卖的送货时间、物流的收货日期等等。在ReactNative中提供了一个日期选择器组件DatePickerIOS,这个是iOS平台使用的。它的API也比较简单,一般实际开发中需要再次封装使用。 二、API 组件中常用属性如下 三、使用 阅读全文
posted @ 2019-12-31 16:49 XYQ全哥 阅读(1100) 评论(0) 推荐(0) 编辑
摘要:一、简介 按钮组件在开发中最常见不过了,有文字,有事件,使用简单,直接看API。注意此按钮组件无法显示图片,如果需要显示图片,可以使用TouchableOpacity等可触摸组件配合Image组件自定义按钮。 二、API 常用的属性和函数如下: 三、使用 将其作为View的子组件,设置大小背景色,示 阅读全文
posted @ 2019-12-31 16:07 XYQ全哥 阅读(1371) 评论(0) 推荐(0) 编辑
摘要:一、简介 在App开发中,当某一个耗时的活动或者事件被触发后,经常需要显示一个loading,表示正在等待过程中。除了第三方提供的比较完善的吐司框架外,还可以使用原生的活动指示器显示。在ReactNative中提供了ActivityIndicator组件,可以用来显示一个loading。 二、API 阅读全文
posted @ 2019-12-31 15:06 XYQ全哥 阅读(492) 评论(0) 推荐(0) 编辑
摘要:一、简介 网络监听,这是App开发中必不可少的功能。开发者会根据网络状态的不同,对App采取不同的应对措施来应对网络问题。例如,在WIFI状态下,用户可以浏览大图或者自动播放视频,在离线状态下,要关闭正在加载的Loading,通过提示用户网络状态不好,以避免长时间等待,提高用户体验。在iOS移动端开 阅读全文
posted @ 2019-12-31 14:28 XYQ全哥 阅读(2112) 评论(0) 推荐(0) 编辑
摘要:一、简介 App在运行的整个过程中,它会有不同的运行状态,例如激活失活状态、前后台进入和离开状态等。开发者可以根据App的不同状态选择合适的时机完成需要的工作。ReactNative中提供了AppState这个API来告知App的状态,它还可以通知状态的改变、甚至用于消息通知的推送等。 二、API 阅读全文
posted @ 2019-12-31 11:50 XYQ全哥 阅读(1016) 评论(0) 推荐(0) 编辑
摘要:一、简介 Express框架为开发者提供了一个中间件功能,这个中间件在服务的请求-响应过程提供一个可以修改内容的机会。中间件的完整结构是这样的,它必须是一个函数,可以访问的参数有错误对象err、请求对象req、响应对象res、以及另一个中间件next函数。next函数的作用是可以将当前中间件的控制权 阅读全文
posted @ 2019-12-30 17:33 XYQ全哥 阅读(338) 评论(0) 推荐(0) 编辑
摘要:一、简介 一个Web服务器去处理每一个URL请求时,根据监听的端口和主机域名,需要对不同的路径去处理然后给出不同的响应。也即通过制定不同的路径,调用对应处理用户的请求。这个路径的制定就是路由。路由其实是一种规则而已。开发者根据这个规则去制定请求的目标地址,服务器根据这个规则去响应请求的目标地址并给出 阅读全文
posted @ 2019-12-30 00:17 XYQ全哥 阅读(672) 评论(0) 推荐(0) 编辑
摘要:一、简介 在前面我们使用了http这个服务来创建了一个简单的web应用,在nodeJs中提供了一个框架来创建web服务,这个框架就是express。express是node中一种web框架,使用express可以构建一个web服务器,通过这个服务器接受web请求req,和处理web的响应res。 二 阅读全文
posted @ 2019-12-29 18:56 XYQ全哥 阅读(532) 评论(0) 推荐(0) 编辑
摘要:一、简介 npm是一款非常好用的包管理工具,在前端开发中很多时候都会使用npm安装其他包文件。但是,npm安装某些包时有时会安装地很慢,这是因为npm管理的源中有些是国外的,包下载的时候需要花费很多时间甚至需要FQ。当然国内开发者通用的做法就是修改npm的源,将其改为国内源,例如淘宝等。说到这里,不 阅读全文
posted @ 2019-12-29 16:14 XYQ全哥 阅读(772) 评论(0) 推荐(0) 编辑
摘要:一、简介 Nodemon是一个非常好用的工具,它可以帮助开发者实现服务的自动重启。在服务端开发中,开发者经常会去修改文件然后进行调试,每次修改完如果需要人为去重新启动服务的话,非常浪费精力和时间。Nodemon这个工具正好提供了重启服务的功能,非常方便。 二、项目 还是采用上篇文章创建的项目为例,如 阅读全文
posted @ 2019-12-29 00:08 XYQ全哥 阅读(2438) 评论(0) 推荐(0) 编辑
摘要:一、简介 Node.js 就是运行在服务端的 JavaScrip,NodeJS既能实现一套后端开发,也能配合React和Mysql实现一套前端全栈开发。所以,学习一下Node.js还是非常有必要的。本人也是开始学习入门知识,跟大家一起努力吧。 二、安装 nodeJS一共有一下几种安装方式,分别如下: 阅读全文
posted @ 2019-12-28 23:02 XYQ全哥 阅读(382) 评论(0) 推荐(0) 编辑
摘要:一、简介 在之前学习的React开发中,一直使用create-react-app脚手架创建和开发Web项目,通过搭配ReactRouter路由实现静态页面的交互,然后通过yarn start或npm start来启动项目,这个启动过程是由客户端服务器执行的。使用express脚手架生成的应用可以作为 阅读全文
posted @ 2019-12-28 11:28 XYQ全哥 阅读(545) 评论(0) 推荐(0) 编辑
摘要:一、简介 在iOS中可以使用UIStatusBar控件改变App的状态栏,同样地,React-Native中可以使用StatusBar组件来控制。 二、API 属性: 方法: 三、使用 使用方法设置 使用属性设置 阅读全文
posted @ 2019-12-27 18:35 XYQ全哥 阅读(1612) 评论(0) 推荐(0) 编辑
摘要:在RN开发中,ReactNative框架中提供了大量的API、组件以及插件等提供开发者使用,在前面已经大概介绍了一些。详情的内容如下所示。 1、组件部分: 2、API部分 3、插件部分 5、类型部分 6、弃用部分 阅读全文
posted @ 2019-12-27 17:28 XYQ全哥 阅读(252) 评论(0) 推荐(0) 编辑
摘要:一、简单介绍 在web开发者,我们可以看到许多的页面可以实现无缝跳转和切换,这些网站大多数都是由用户发送请求并打开若干个独立文件的一系列页面构成的,对于这些文件和资源,用户可以进行前进、回退、跳转等操作。但是,如果把这些操作放在单页面应用中执行的话,就会出现很多问题。因为单页面应用中,所有的内容都处 阅读全文
posted @ 2019-12-27 14:24 XYQ全哥 阅读(323) 评论(0) 推荐(0) 编辑
摘要:一、简介 在上一篇的Redux文章中,详细介绍了Redux的概念和综合利用,开发者可以通过Redux的State管理系统管理整个应用程序的数据流,依靠功能完备的Store来分发Action,进而渲染和更新组件的UI。在我们之前的文章介绍中,根组件是保存State的组件,一般的Web开发,都是将Sta 阅读全文
posted @ 2019-12-24 17:53 XYQ全哥 阅读(470) 评论(0) 推荐(0) 编辑
摘要:一、简介 在上一篇文章中,大概讲了下Flux设计模式的使用,在末尾顺便提了一些基于Flux的脚本库,其中Redux已经毋庸置疑地成为了众多脚本库的翘楚之一。是的,Redux是基于Flux开发的,Redux库的尺寸非常小,代码量少,核心目的仍是处理数据流变化的问题。Redux并不完全是Flux,它只是 阅读全文
posted @ 2019-12-22 00:01 XYQ全哥 阅读(341) 评论(0) 推荐(0) 编辑
摘要:一、简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序。然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露出臃肿的弊端,state中大量的数据放在根组件,而且与UI联系紧密,明显会增加系统的维护成本。此时, 阅读全文
posted @ 2019-12-19 14:53 XYQ全哥 阅读(779) 评论(0) 推荐(0) 编辑
摘要:一、简介 如我们所知,JavaScript有高阶函数这么一个概念,高阶函数本身是一个函数,它会接收或者返回一个函数,进而对该函数进行操作。其实,在React中同样地有高阶组件这么一个东西,称为HOC,它也是一个函数,但是与高阶函数不同的是,高阶组件操作的是组件,它会接收一个组件作为参数,然后返回另外 阅读全文
posted @ 2019-12-18 14:12 XYQ全哥 阅读(1435) 评论(0) 推荐(0) 编辑
摘要:一、简介 React功能虽然很强大,但是说到底它仍然只是一个简单的创建视图的脚本库,如果想要实现一些更为复杂的业务逻辑,我们还需要使用React搭配其他的脚本库协同工作,以提高应用程序的性能。其中,Fetch就是一款优秀的polyfill请求脚本库,它允许用户使用Promise对象方便地创建API调 阅读全文
posted @ 2019-12-18 11:23 XYQ全哥 阅读(482) 评论(0) 推荐(0) 编辑
摘要:一、简介 React中提供了很多常用的API,其中有一个React.Children可以用来访问特定组件的子元素。它允许用来统计个数、map映射、循环遍历、转换数组以及显示指定子元素,如下所示: 二、使用 需求:根据条件,根组件会选择需要显示的子组件进行展示。 可以看到三个子组件,只有优秀组件显示出 阅读全文
posted @ 2019-12-17 17:02 XYQ全哥 阅读(1275) 评论(0) 推荐(0) 编辑
摘要:一、简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS系统提供的UIActionSheet( deprecated in iOS 8)类似。使用Actio 阅读全文
posted @ 2019-12-16 19:02 XYQ全哥 阅读(741) 评论(0) 推荐(0) 编辑
摘要:一、简介 在使用一款App的时候,经常会用到对话框进行信息的友好提示,一般简单要求性不高的时候我们可以使用web提供的alert实现即可。但是,对于需要交互性和美观性的对话框,alert就明显无法满足需求了,首先alert对话框比较丑陋,不符合我们的业务和审美需求,此时如果我们去定制的话,稍微有些浪 阅读全文
posted @ 2019-12-16 18:24 XYQ全哥 阅读(465) 评论(0) 推荐(0) 编辑
摘要:一、简介 AsyncStorage是一个简单的具有异步特性可持久化的键值对key-value的存储系统。它对整个APP而言,是一个全局的存储空间,可以用来替代H5中提供的window属性LocalStorage。AsyncStorage跟iOS中的偏好设置NSUserDefault很类似,也是通过p 阅读全文
posted @ 2019-12-16 16:46 XYQ全哥 阅读(599) 评论(0) 推荐(0) 编辑
摘要:一、简介 每一个应用程序的运行都有一个入口文件或者入口函数,例如iOS中的使用UIApplicationMain类完成入口函数的实现,在React-Native中,AppRegistry类就肩负着这个责任。AppRegistry主要负责运行React-Native应用程序的JavaScript入口, 阅读全文
posted @ 2019-12-16 15:45 XYQ全哥 阅读(1021) 评论(0) 推荐(0) 编辑
摘要:一、简介 在移动端开发中,很多时候需要嵌入一个网页来帮助实现某一个活动,这方式大大提高了活动快速迭代的灵活性,在RN中,同样也这么处理这种情况的。其实,这种混合式开发称为Hybird APP,它们就是基于WebView来实现的。React-Native中的WebView组件提供的功能基本满足需求,现 阅读全文
posted @ 2019-12-16 14:23 XYQ全哥 阅读(582) 评论(0) 推荐(0) 编辑
摘要:一、简介 标签栏Tab的作用对于应用程序那是不言而喻的,它是应用程序中除了导航栏组件外的又一个核心组件,使用它可以实现页面的切换。RN提供了一个TabBarIOS组件来完成页面的切换(视图或者路由),它代表整个标签栏,不过它需要搭配的它的一个附属组件TabBarIOS.Item,它代表每一个tabI 阅读全文
posted @ 2019-12-14 23:05 XYQ全哥 阅读(343) 评论(0) 推荐(0) 编辑
摘要:一、简介 现在设备显示屏的清晰度越来越高,尤其是iOS移动设备上的高清适配,Retina显示屏。在开发中,为了保证图片在不同的设备上显示的效果保持一致,往往需要准备多套图片,比如iOS开发中的@1x,@2x,@3x图,这是一件比较繁琐的事。在RN中,针对这个情况提供了一种新的解决方案,由于RN中的p 阅读全文
posted @ 2019-12-14 17:10 XYQ全哥 阅读(1211) 评论(0) 推荐(0) 编辑
摘要:一、简介 在前面创建使用组件时,虽然使用的都是伸缩盒子布局,但是很少使用宽高来进行绝对定位。在iOS中可以通过UIScreen控件获取当前屏幕的宽高,同样地,在RN中提供了一个尺寸组件Dimensions,英文译为“英尺”,开发者通过它也能拿到当前屏幕的宽和高。Dimensions组件类中,声明的函 阅读全文
posted @ 2019-12-14 16:03 XYQ全哥 阅读(2004) 评论(0) 推荐(0) 编辑
摘要:一、简介 当页面内容的非常多时,即使换行后仍然无法充分显示,此时最好的解决办法就是让页面可以滚动显示。在React-Native中,提供了可供滚动的视图组件ScrollView组件。它的属性和方法以及使用基本和iOS的UIScrollView类似,下面简单列举常见的属性和函数,更多的详细请查看API 阅读全文
posted @ 2019-12-14 15:29 XYQ全哥 阅读(970) 评论(0) 推荐(0) 编辑
摘要:一、简介 在应用程序中,图片组件非常常见,不论是缩略图、大图、还是小图标等等,都需要使用图片组件进行显示。在Web开发中提供了<img/>标签显示图片,在iOS中提供了UIImageView显示图片,而在RN中,则使用Image组件显示图片。同样的道理,Image组件既可以显示本地图片(磁盘、相册) 阅读全文
posted @ 2019-12-14 12:14 XYQ全哥 阅读(1412) 评论(0) 推荐(0) 编辑
摘要:一、简介 在应用程序中,最灵魂的功能就是交互。通过给应用程序的组件添加事件来实现交互,进而提高用户体验。然而,ReactNative并不能像Web开发那样可以给大多数的标签元素绑定click事件,例如div、button、input等等,但是RN除了可以通过Text的onPress完成事件外,还是额 阅读全文
posted @ 2019-12-13 15:23 XYQ全哥 阅读(434) 评论(0) 推荐(0) 编辑
摘要:一、简介 一个应用程序中,输入框基本不可或缺,它衍生的搜索功能在很多APP中随处可见。在iOS开发中,使用的输入框组件是UITextView和UITextField,在React-Native中使用的则是TextInput组件。TextInput组件可以通过键盘将文本输入到APP的组件,它提供了如自 阅读全文
posted @ 2019-12-13 13:24 XYQ全哥 阅读(2231) 评论(0) 推荐(0) 编辑
摘要:一、简言 在软件开发中,不论是Web还是App,它们的应用程序都是由很多的功能视图组成的。对于这些组合的视图,如何实现页面间平滑地过渡,应用都有统一的一套跳转机制,这个功能就是路由或者叫导航。应用程序通过导航,可以自由地实现页面之间的切换、前进和后退。在React中使用的是React Router, 阅读全文
posted @ 2019-12-12 15:19 XYQ全哥 阅读(584) 评论(0) 推荐(0) 编辑
摘要:一、介绍 在App中,很多数据消息显示都是一行行动态展示的,例如新闻标题,其实每一条新闻标题都可以独立成一个简单的列表组件,之前我们使用Text组件将数据都写死了,为了提高组件的灵活性,我们可以使用Text组件封装一个列表组件,将标题的数据传入列表组件,其内部展示交给Text组件即可。在上一篇Tex 阅读全文
posted @ 2019-12-10 15:18 XYQ全哥 阅读(829) 评论(0) 推荐(0) 编辑
摘要:一、简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分。在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数据异步或延时问题,只有充分利用组件的生命周期来把握框架载入和数据处理的时机,才能将组件性能发挥到合理 阅读全文
posted @ 2019-12-09 16:50 XYQ全哥 阅读(226) 评论(0) 推荐(0) 编辑
摘要:一、简言 初学RN,一切皆新。Text组件主要用于显示文本,Text组件的重要性不言而喻,无论是Web开发还是客户端开发,都离不开它。它具有响应特性,也即表现为当它被触摸时是否显示为高亮状态。在Web开发中,字体样式的继承十分重要,在body上设置字体可以作用到全部的文本标签,而RN中字体样式只有在 阅读全文
posted @ 2019-12-07 22:11 XYQ全哥 阅读(1392) 评论(0) 推荐(0) 编辑
摘要:一、简言 初学RN,一切皆新。View组件跟我们iOS中UIView类似,作为一个容器视图使用,它主要负责承载其他的子组件。View组件采用的是FlexBox伸缩盒子布局,通过对它的布局可以影响子组件的布局排列,默认View组件的布局为纵向布局,一般开发中需要把它转为横向布局使用。现在使用最基本的组 阅读全文
posted @ 2019-12-06 22:56 XYQ全哥 阅读(1077) 评论(0) 推荐(0) 编辑
摘要:一、介绍 初学RN,一切皆新。在上篇中成功地创建并运行了一个React-Native项目,这个demo的基本结构都是系统已经创建好的,开发者在此结构下完成自己的开发即可。分别用Xcode和WebStorm打开结构图如下所示: 二、分析 andriod文件夹:对应安卓项目, ios文件夹:对应iOS项 阅读全文
posted @ 2019-12-06 18:03 XYQ全哥 阅读(360) 评论(0) 推荐(0) 编辑
摘要:搭建ReactNative开发环境 不废话,具体步骤如下: 一、安装需要的软件 1、Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。 译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/ 阅读全文
posted @ 2019-12-06 15:49 XYQ全哥 阅读(244) 评论(0) 推荐(0) 编辑
摘要:一、简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的bug问题。如我们所知,JavaScript是一种弱类型的语言,这意味着开发者可以随意地修改变量值的 阅读全文
posted @ 2019-12-05 15:57 XYQ全哥 阅读(749) 评论(0) 推荐(0) 编辑
摘要:一、简言 React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify、Gulp、Grunt、webpack等。其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优 阅读全文
posted @ 2019-12-05 11:38 XYQ全哥 阅读(1146) 评论(0) 推荐(0) 编辑
摘要:一、简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式。其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在目前项目中使用率还是很高的。但随着后来技术更新,React组件创建的方式也在不断的变化和过时。到目前 阅读全文
posted @ 2019-12-04 14:13 XYQ全哥 阅读(1132) 评论(0) 推荐(0) 编辑
摘要:一、简介 在JavaScript中,函数就是第一类公民,它可以像字符串、数字等变量一样,使用var修饰并作为数据使用。它可以作为数值、可以作为参数、还可以作为返回结果。可以说JavaScript就是函数式编程。ES6新语言特性中,箭头函数、扩展运算符会极大地帮助开发者利用函数式编程技术进行开发。 1 阅读全文
posted @ 2019-12-02 22:11 XYQ全哥 阅读(283) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示