2020年05月_hzxOnlineOk

原创 React-native 开发APP优化篇（一）

React-native 开发APP应尽量以以下目标来实施开发：（1）应尽量少发起请求，能免就免（2）应尽量少的使用this.setState，多次render除了低效之外，还容易导致一些莫名的bug（3）如果一个页面（如首页），有多个请求，那么推荐使用promise.all进行请求合并，并且统一处理this.setState，做到仅仅一次render（4）...

2020-05-26 09:03:26 319

以Dva.js为例子(models.js)：下面代码中，有2个接口方法，1、addCollect添加收藏 2、cancelCollect取消收藏提交表单格式的数据，需要new FormData 申请一个表单格式的实例，再通过实例去追加表单字段数据addCollect: (params) => { params.isForm = true const collect = new FormData() collect.append('soleId', `${param

2020-05-26 08:58:22 2273

原创移动端Android真机上 scrollTop一直为0的解决方案

确保html,body的高度为auto!!! 不能是100%

2020-05-25 15:07:34 887 1

原创 react 移动端h5 监听滚动document.documentElement.scrollTop取值总取上一次滚动触发结束的值

react 移动端h5 监听滚动document.documentElement.scrollTop取值总取上一次滚动触发结束的值，也就是上一次滚动到700，这一次滚动到900，那么在touchmove事件回调中打印出的是700一个不够精确的解决办法是，为处理逻辑增加一个定时器延时获取，给一定的延时，可以获得接近正确的数据，同时又能及时的触发逻辑去渲染UIcomponentDidMount() { document.documentElement.addEventListener(..

2020-05-25 13:24:01 1104

转载 HTML文章页面，由其他文档拷贝过来的换行符识别不了问题的解决(一行样式解决)

今天做一个文章展示页面，当我将填充文章copy上去的时候，发现页面并没有识别文字的换行，而是将文字都挤在同一行我尝试用<pre></pre>标签，但效果并不好百度过后才知道，CSS中由“white-space” 属性设置如何处理元素内的空白包括：但是保留换行符、是否合并空白符、是否自动换行、值描述normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap...

2020-05-24 22:44:06 450

原创 react 开发移动端h5项目图片打包不显示可以这样处理（转换图片为base64）

项目做好了，准备打包构建，发现本地引用的图片资源，在打包后未能生成，导致部署后，图片未能显示出来方法就是，将图片转换成base64编码我们只需要到http://tool.chinaz.com/tools/imgtobase这个站点，上传我们需要转换成base64的图片，将图片转成base64，替换img标签的src属性值为base64即可，这样子打包就能将正确的图片引用打包进去...

2020-05-23 23:54:06 969

原创 react 写移动端H5页面引用本地图片且路径正确，但是图片无法正确展示（会展示成默认图片）

错误的图片如下：Card.js（这边直接在img标签写的相对路径，但是无法正确显示）import React from 'react'import styles from './card.less'export default class extends React.Component { constructor(props) { super(props) this.state = { // isShow: false, } ..

2020-05-23 21:52:14 806

原创 React-native Flatlist/SectionList/ScrollView的onEndReached多次触发问题解决

经过博主亲自尝试有效：一、问题RN项目里使用Flatlist或者SectionList组件时，组件一加载，就会自行触发多次onEndReached事件。二、原因经过调试发现，是因为最外层父View没有设置固定height或只设置{flex：1}属性，导致onEndReached不能正确监听事件。flex: 1是自动计算高度，这对容器列表组件很不友好，计算会错乱。三、解决1.给最外层父组件一个固定高度{height：‘100%’}；2.设置onEndReachedThresho

2020-05-14 12:54:47 1338

转载 react-native 报错Invalid child context `virtualizedCell.cellKey`.........

问题一：Invalid child context `virtualizedCell.cellKey`.........大致意思就是希望获取到字符串，实际获取到的是数字类型滴解决方法：将_keyExtractor = (item, index) => index转为_keyExtractor = (item, index) => index.toString() <FlatList extraData={this.state} L...

2020-05-08 18:45:53 214

原创 react-native 中同一个容器下设定paddingHorizontal=15下划线宽度仍旧是100%

今天写一个列表组件，每项数据项都要求有下划线，且要扣掉左右边距的宽度，于是我想到了用paddingHorizontal: 15不过出现了这样的现象：react-native 中，同一个容器下设定paddingHorizontal：15后下划线宽度仍旧是100%，为什么？考虑到react-native并不是完全实现如同CSS3的所有样式，( • ̀ω•́ )✧所以我机智的换成了margi...

2020-05-07 17:48:06 2310

原创 js正则表达式匹配携带有img子标签的父级P标签集合

const reg = /<p\b[^<>]*><img\b[^<>]*\/><\/p>/g // 这边是默认匹配0下标进行html文本替换 // const matchStr = content.match(reg) // const strReg = /<img\b[^<>]*\/...

2020-05-06 11:48:10 1172 1

hzxOnlineOk的博客