- 一、前言ReactNative组件分为类组件和函数组件。实现ReactNative自定义组件基本流程如下:组件需要实现什么效果;组件基本逻辑是怎样的;继承Component或PureComponent实现render()方法;定义组件属性字段及其类型,以及是否必须,如不必须则默认字段值是什么;绑定点击或者触摸等事件方法,执行前需要判空;注册、调用。 二、参数传递React Native版本... 一、前言ReactNative组件分为类组件和函数组件。实现ReactNative自定义组件基本流程如下:组件需要实现什么效果;组件基本逻辑是怎样的;继承Component或PureComponent实现render()方法;定义组件属性字段及其类型,以及是否必须,如不必须则默认字段值是什么;绑定点击或者触摸等事件方法,执行前需要判空;注册、调用。 二、参数传递React Native版本...
- 一、前言在开发react-native App时,相信大家都遇到过这样的问题:当用户设置了系统的字体大小之后,导致APP布局紊乱,甚至有些内容会被切掉/隐藏,这对于用户来讲,是非常不好的用户体验。那为什么会出现这种情况呢?原因是我们在开发的时候,布局的前提是系统的字体大小设置为默认大小,所以只能保证在系统字体大小正常的情况下,我们的布局是友好的,那么,我们应该如何解决这个问题呢?今天这篇文... 一、前言在开发react-native App时,相信大家都遇到过这样的问题:当用户设置了系统的字体大小之后,导致APP布局紊乱,甚至有些内容会被切掉/隐藏,这对于用户来讲,是非常不好的用户体验。那为什么会出现这种情况呢?原因是我们在开发的时候,布局的前提是系统的字体大小设置为默认大小,所以只能保证在系统字体大小正常的情况下,我们的布局是友好的,那么,我们应该如何解决这个问题呢?今天这篇文...
- 一、安装npm i react-native-linear-gradientreact-native link react-native-linear-gradient 二、属性介绍 2.1 colors默认情况下,渐变色的方向是从上向下的。<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} style={{heigh... 一、安装npm i react-native-linear-gradientreact-native link react-native-linear-gradient 二、属性介绍 2.1 colors默认情况下,渐变色的方向是从上向下的。<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} style={{heigh...
- 一、前言在做RN App开发过程中离不了用户交互,在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件,需要借助Touchablexxx组件来包裹视图。为什么说是Touchablexxx呢,因为它不只是一个组件,而是一组组件,以下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeedback:响应用户的点击事件,如果你想在处理点... 一、前言在做RN App开发过程中离不了用户交互,在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件,需要借助Touchablexxx组件来包裹视图。为什么说是Touchablexxx呢,因为它不只是一个组件,而是一组组件,以下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeedback:响应用户的点击事件,如果你想在处理点...
- 一、前言Hook 是 React 16.8.0 的新增特性,React Native 0.59及以上版本支持 Hook。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。请注意,要启用 Hook,所有 React 相关的 package 都必须升级到 16.8.0 或更高版本。如果你忘记更新诸如 React DOM 之类的 package,Hook 将... 一、前言Hook 是 React 16.8.0 的新增特性,React Native 0.59及以上版本支持 Hook。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。请注意,要启用 Hook,所有 React 相关的 package 都必须升级到 16.8.0 或更高版本。如果你忘记更新诸如 React DOM 之类的 package,Hook 将...
- 一、文件加载顺序React调用顺序: index.html → index.js → components/组件一般项目创建好后会有二个文件:index.html、index.js。my-app文件夹下的public/index.html 和src/index.js的源码,可以在这里编写项目代码,但是注意 public/index.html 是启动http服务器的首页,src/index... 一、文件加载顺序React调用顺序: index.html → index.js → components/组件一般项目创建好后会有二个文件:index.html、index.js。my-app文件夹下的public/index.html 和src/index.js的源码,可以在这里编写项目代码,但是注意 public/index.html 是启动http服务器的首页,src/index...
- 一、前言React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)。 二、UI 组件只负责 UI 的呈现,不带有任何业务逻辑;没有状态(即不使用this.state这个变量);所有数据都由参数(this.props)提供;不使用任何 Redux 的 API; 三、容器组件负责管理数据和业务... 一、前言React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)。 二、UI 组件只负责 UI 的呈现,不带有任何业务逻辑;没有状态(即不使用this.state这个变量);所有数据都由参数(this.props)提供;不使用任何 Redux 的 API; 三、容器组件负责管理数据和业务...
- 一、前言在《React进阶(七):props属性》博文中,主要讲解了props的应用场景及应用示例。本文主要梳理state属性的应用场景及应用实例。 二、React 渲染过程React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态间的切换,然后渲染 UI,让用户界面和数据保持一致。React 中只需更新组件的 state,然后根据新的 state ... 一、前言在《React进阶(七):props属性》博文中,主要讲解了props的应用场景及应用示例。本文主要梳理state属性的应用场景及应用实例。 二、React 渲染过程React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态间的切换,然后渲染 UI,让用户界面和数据保持一致。React 中只需更新组件的 state,然后根据新的 state ...
- 一、前言在组件整个生命周期中,随着组件的props或者state发生改变,其DOM表现也会发生相应的变化。一个组件就是一个状态机,对于特定地输入,它总返回一致的输出。 二、生命周期图例一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。React应用中,组件加载顺序及生命周期如下图所示: 2.1 constructor( )constructor是ES6对类的默认方法,通过 ... 一、前言在组件整个生命周期中,随着组件的props或者state发生改变,其DOM表现也会发生相应的变化。一个组件就是一个状态机,对于特定地输入,它总返回一致的输出。 二、生命周期图例一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。React应用中,组件加载顺序及生命周期如下图所示: 2.1 constructor( )constructor是ES6对类的默认方法,通过 ...
- 一、前言在《React进阶(四):路由介绍》博文中,介绍了React路由相关知识,在实际项目开发过程中,路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定,故需要导航守卫来完成这一事项。在实现react-router路由拦截之前,先看一下vue路由拦截是如何使用的,都做了哪些事情。正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 二、全局守卫可以使... 一、前言在《React进阶(四):路由介绍》博文中,介绍了React路由相关知识,在实际项目开发过程中,路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定,故需要导航守卫来完成这一事项。在实现react-router路由拦截之前,先看一下vue路由拦截是如何使用的,都做了哪些事情。正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 二、全局守卫可以使...
- 写在前面的话:事务不多或者不紧急,故空闲时间用来充电,鉴于之前自己一直在做Vue开发,现在此基础上接触学习React。大致的学习思路参照Vue学习路线,边学习边总结边实践,形成学习闭环。万事皆有法则,第一次应用React,首先需要环境搭建:Node.js(用于执行js)、npm(包管理器)。具体安装方法请参考博文《Vue进阶(一):Vue学习资料汇总》中有关环境搭建部分。安装脚手架工具:cr... 写在前面的话:事务不多或者不紧急,故空闲时间用来充电,鉴于之前自己一直在做Vue开发,现在此基础上接触学习React。大致的学习思路参照Vue学习路线,边学习边总结边实践,形成学习闭环。万事皆有法则,第一次应用React,首先需要环境搭建:Node.js(用于执行js)、npm(包管理器)。具体安装方法请参考博文《Vue进阶(一):Vue学习资料汇总》中有关环境搭建部分。安装脚手架工具:cr...
- 一、前言继前期iOS由于移动设备内存不足导致页面白屏问题之后,(详参博文《跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决》)又发现APP在iOS系统运行过程中,会高频出现页面黑屏、黑色区块,白屏问题。 二、问题分析出现以上问题是由于页面渲染问题导致的,引发的可能原因是页面栈溢出、应用内存泄漏。经过getCurrentPages()输出页面栈... 一、前言继前期iOS由于移动设备内存不足导致页面白屏问题之后,(详参博文《跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决》)又发现APP在iOS系统运行过程中,会高频出现页面黑屏、黑色区块,白屏问题。 二、问题分析出现以上问题是由于页面渲染问题导致的,引发的可能原因是页面栈溢出、应用内存泄漏。经过getCurrentPages()输出页面栈...
- 自定义 Hooks 是我对逻辑重用的第二波探索。研究的过程,除了搞明白怎么创建 自定义 Hooks、优点、使用场景,还因此意识到项目代码中存在的可提升空间。收获颇丰! 自定义 Hooks 是我对逻辑重用的第二波探索。研究的过程,除了搞明白怎么创建 自定义 Hooks、优点、使用场景,还因此意识到项目代码中存在的可提升空间。收获颇丰!
- 遇到逻辑复用这个话题的时候,我尝试从不同层面去思考问题。既有对具体问题的实现方案,也有实现方案背后包含了哪些技术点,以及延伸了不同方案可行与不可行的总结。 遇到逻辑复用这个话题的时候,我尝试从不同层面去思考问题。既有对具体问题的实现方案,也有实现方案背后包含了哪些技术点,以及延伸了不同方案可行与不可行的总结。
- 本文借助中间件的思想实现嵌套交互功能,且所有交互可无序化随意组合。开发方案综合了代码的灵活拓展和低成本维护两个方面的要求,在与之前批量操作的实现方案对比后,发现本方案可读性更佳。 本文借助中间件的思想实现嵌套交互功能,且所有交互可无序化随意组合。开发方案综合了代码的灵活拓展和低成本维护两个方面的要求,在与之前批量操作的实现方案对比后,发现本方案可读性更佳。
上滑加载中
推荐直播
-
华为云IoT开源专家实践分享:开源让物联网平台更开放、易用
2024/05/22 周三 16:30-18:00
张俭 华为云IoT DTSE技术布道师
开源,意味着开放、共享、互助、共赢。作为万物上云及各行业数字化的物联网底座,华为云IoT积极拥抱开源,借助行业开源的最佳实践,构建可靠、易用的物联网平台,并通过开放南北向SDK,助力开发者快速构建物联网应用。本期直播,华为云IoT开源专家、物联网平台资深“程序猿”张俭,带你了解华为云IoT的开源生态,并手把手教你玩转开源社区!
去报名 -
数字技术创新与商业愿景--数字化转型战略解读
2024/05/22 周三 19:00-20:30
王纪奎老师 华为科学家咨询委员会CTO
数字化转型浪潮下,你是否缺乏对前沿科技的战略洞察、难以将企业转型与国家战略相融合、缺少系统性规划的数字化思维…… 我们特别邀请了华为科学家咨询委员会CTO、战略研究院数字经济与数字化转型首席专家、《数字化转型战略》一书的作者——王纪奎老师。 在5月22日(周三)19点,为我们带来一场主题为“数字技术创新与商业愿景--数字化转型战略解决”的精彩直播。
去报名 -
华为云开发者日·广州站
2024/05/23 周四 14:30-17:30
华为云专家团
华为云开发者日HDC.Cloud Day是面向全球开发者的旗舰活动,汇聚来自千行百业、高校及科研院所的开发人员。致力于打造开发者专属的技术盛宴,全方位服务与赋能开发者围绕华为云生态“知、学、用、创、商”的成长路径。通过前沿的技术分享、场景化的动手体验、优秀的应用创新推介,为开发者提供沉浸式学习与交流平台。开放创新,与开发者共创、共享、共赢未来。
去报名
热门标签