自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

贺知叶的博客

JavaScript+Html+Css

  • 博客(22)
  • 收藏
  • 关注

原创 解决国内部分系统自带浏览器视频层级问题

传入你的 url 视频地址并返回 blob:// 直接放到你的video src 即可。

2023-11-01 13:50:18 109 1

原创 react-native项目上线国内安卓应用市场

用户隐私协议审核国内Android端上线应用是需要在进入程序时弹出一个表述该程序的《隐私政策》和《用户协议》以符合工信部政策。

2023-09-18 16:14:36 374 1

原创 针对QQ浏览器video标签不可控实现的React组件

一个简单的视频播放控件,会在QQ浏览器上使用canvas进行视频播放。

2023-09-18 16:13:20 129

原创 React 组件渲染时遇到错误如何及时的捕获并立即切换渲染至其他组件

react组件渲染时遇到错误如何及时的捕获并立即切换渲染至其他组件

2023-02-13 21:28:16 451

原创 React 自定义轮播图Carousel组件

自定义轮播图Carousel组件

2022-04-11 19:56:30 3084 3

原创 React-Navigation架构嵌套路由:

React-Navigation ^5x架构嵌套路由:react-native使用的版本是^0.64,导航用的5x。目前已经出到了6x,不过也相差不大。目录React-Navigation ^5x架构嵌套路由:前言一、React-Navigation包引用二、import { NavigationContainer } from '@react-navigation/native'1.注册主路由容器 NavigationContainer2.App.js / index.js三、import { c

2021-12-21 10:07:39 1557

原创 React-Native新架构:

React-Native新架构:ReactNative宣布在2018年宣布对架构进行重要调整,此时正式Flutter面世。(2018.2.27-世界移动大会发布Fluuter)。而React-Native是在2015发布。以下是重构前的React-Native运行方式:如图所示,RN结构四大核心部分:React代码部分,由代码翻译过来的JavaScript部分,一系列统称为“桥”的部分,以及原生部分。当前架构一个关键点是:两个端——JavaScript端和Native端,是互相都不了解对方的情况

2021-12-15 15:43:34 1013

原创 React-Native : ‘^0.64.0’ 项目架构

项目场景:这里介绍一下我自己从0-1的React-Native项目架构,细粒化的程度还行,主要我喜欢深度细粒化的项目,写起来很舒服。package.json:"dependencies": { "@react-native-async-storage/async-storage": "^1.15.5", "@react-native-community/masked-view": "^0.1.10", "@react-navigation/bottom-tabs": "^5.

2021-12-15 15:37:47 2204

原创 React中如何在Hooks函数式的写法中强制渲染?

项目场景:基本上我们使用 this.forceUpdate() 方法强制组件在 React 类组件中立即重新渲染问题描述:在Class的写法中可以使用 this.forceUpdate() 来执行强制渲染操作,但我们如何在Hooks里使用呢? 解决方案:这可以使用useState或useReducer,因为在内部useState使用useReducer.// 引用 useReducer import { useReducer } from 'react'// 定义 useReduce

2021-11-25 12:17:06 3770

原创 将阿拉伯数字转换为英文字母ABCD:

项目场景:列表序号要求为英文单词问题描述:map渲染出来的index转化,1 => A,2 => B,3 => C 解决方案:// 以0开始 使用map里index的话,就是String.fromCharCode(index+65)String.fromCharCode(2+65)// 以0开始,当前输出为C,因为是2为第三位...

2021-11-25 12:03:05 2688

原创 JavaScript阿拉伯数字“1“转中文数“一“

项目场景:列表序号采用中文一、二、三,而不是阿拉伯数字1、2、3:问题描述:开始是列表结构,本想寻求使用map遍历的index+1,获得对应下标为序号,但UI要求使用中文一,二,三的方式。死写肯定不行。所以有了以下代码:原因分析:直接index+1,死转肯定不行,想办法灵活一点。解决方案:const toChineseNumber = (n) => { if (!Number.isInteger(n) && n < 0) { throw Erro

2021-11-25 11:56:52 3690 1

原创 react-native禁止系统设置字体大小

项目场景:App标准规范之一就是要适配屏幕大小,使用户体验良好,防止UI尺寸变形给用户带来不好的体验是最高的标准。用户字体看不清或者误修改了字体大小之后进入我们App必然会发现屏幕内某些字体大小发生异常,冲出当前轮廓的范围之外并且与"UI设计师"提供的设计文档显示相反,这并不是我们想要实现的效果。问题描述:1、设置系统字体大小导致UI混乱2、用户体验极其不良好3、与UI设计文档实现效果相反 解决方案:import { TextInput, Text } from 'react-nati

2021-07-12 09:55:52 521

原创 React Native Large List V3高性能列表组件-踩坑记录

项目场景:要求在手机端实现类似于web端的表格UI功能,想到可以使用该组件。原生桥接实现的一组高性能弹性大列表组件,支持超大数据源,高度重用,极大地优化了性能,滑动更跟手,完全可以媲美原生列表。CPU和内存占用比官方的SectionList明显少很多。当前使用版本:“react”: “17.0.1”,“react-native”: “0.64.0”,“react-native-largelist-v3”: “^3.0.15”,“react-native-spring-scrollview”:

2021-04-13 16:38:59 1370

原创 使用native-echarts图表绘制组件-记录踩坑

项目场景:获取后台的数组数据结构,并根据项目需求绘制图形态势页面,将使用到第三方组件 ‘Native-Echarts’一、版本:“react”: “17.0.1”,“react-native”: “0.64.0”,“native-echarts”: “^0.5.0”,“react-native-webview”: “^11.3.2”问题描述:1、报错Invariant Violation:WebView has been removed from React Native. It ca

2021-04-13 15:39:58 702

原创 一些ES6的常用特性

1、let 和 const:​ let为声明变量,const为声明常量。块级作用域:​ let的用法类似于var但他只能在声明的代码块里面使用,称之为:块级作用域​ const为一个只读的常量,且常量的值无法改变,作用域也在声明的代码块里,是块级作用域暂时性死区 TDZ:​ 当let以及const在代码块里面声明以后就绑定在这,无法在当前块级外面使用,并且JS编译是从上往下编译,所以只能在当前声明行一下调用 if (true) { console.log(MAX);

2021-03-11 01:05:48 177

原创 原型链

原型链当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象( object )都有一个私有属性(称之为 proto )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( proto ) ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节,就是原型链继承。目录原型链前言一、图形描述:二、图形分析:三、属性解释:原型链总结:前言原型链有个缺点就是:在性能方面,原型链会在查找属性上比较耗时,

2021-02-28 15:14:36 234 6

原创 闭包

闭包:什么是闭包?有权访问另一个函数作用域内部变量的函数是闭包描述闭包://父函数function f1(){ const n = 123;//父函数内变量function f2(){ //子函数 alert (n) //在子函数中调用父函数变量} return f2; //返回子函数}var result = f1 (); //调用父函数f1并封装成变量result() //调用父函数变量f1形成闭包 原理是什么呢?当内部函数在定义它的作用域的外部被引用时,就创

2021-02-27 00:52:33 178

原创 如何在React Native中获得地理位置

如何在React Native中获得地理位置geolocation API扩展了geolocation的web规范。在android中,地理位置使用android.location. api。以下替代库用于在React Native中包含新的位置服务API。React-native-geolocation-serviceReact-native-location要请求位置访问,需要在应用程序的AndroidManifest.xml文件中包含以下代码。<uses-permission and

2021-02-24 15:15:32 565

原创 React-Native强制关闭软键盘

项目场景:NativeBase切换Tabs未关闭软键盘示例:UI界面使用NativeBase子组件Tabs,在Tabs中嵌入两个界面,Tab界面中拥有Input输入框效果问题描述:当我在Tabs中点击Input输入内容时切换去其他Tab是不会关闭Input输入框,并且输Input输入焦点依然在之前的输入框里面,所以我还是可以继续输入内容,这时BUG发生了。继续在上个输入框输入内容后会造成UI变形,界面显示焦点将会强制聚集到当前Input输入框界面。原因分析:由于使用NativeBase中

2021-01-22 18:47:53 1929

原创 React-Native环境搭建流程

React-Native环境搭建流程 React-Native:0.63,React:17.0对应系统对应不同环境:Mac->Xcode,Windows->AndroidStudio,RN->VSCode希望这篇文章对你的问题可以有效地解决。防止以后忘记环境安装流程,对你以后更换工作并且又要重新环境有用处。蟹蟹!文章目录React-Native环境搭建流程 React-Native:0.63,React:17.0前言一、基本步骤二、创建项目三、部分问题解决方案总结前言不多

2021-01-11 15:22:20 651

原创 解决抖音爱心动画实现

项目场景:项目场景:通过进入app首页显示一个满屏的视频列表功能,类似于抖音的效果问题描述:单次点击的时候切换暂停/播放状态,连续多次点击每次在点击位置出现一个爱心,随机旋转一个角度,爱心先放大再变透明消失。 原因分析:要求判断点击手势效果单次点击的时候切换暂停/播放状态连续多次点击每次在点击位置出现一个爱心并且随机旋转一个角度爱心先放大再变透明消失。解决方案://在相关页面引用即可 const [heartList, setHeartList] = React.u

2020-12-08 15:57:59 1130

原创 初探无状态组件管理器‘Hooks’

使用Hook状态管理前言一、Hooks是什么?二、使用步骤1.引入库2.读入数据总结1.使用Hook状态管理Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。文章目录前言一、Hooks是什么?二、使用步骤1.引入库2.读入数据总结前言我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能?React 早期版本,类组件可以通过继承PureComponent来优

2020-12-08 15:15:02 308

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除