aijason-CSDN博客

原创 React Native 版 WanAndroid 客户端开源啦！

Github 项目地址：https://github.com/aijason/RN_WanAndroid基于Facebook React-Native的WanAndroid客户端，支持Android和iOS。采用axios + react-navigation + redux为项目基本框架，对接大部分WanAndroid开放API，拥有较好的项目结构&比较规范的代码！本项目...

2019-10-05 03:46:29 370

原创解决初始化TypeScript模板的RN项目报错问题

info Fetching template react-native-template-react-native-template-typescript...yarn add v1.22.4warning ../../../package.json: No license field[1/4] ???? Resolving packages...warning jest > jest-cli > jest-config > jest-environment-jsdom >

2020-05-26 16:32:57 2214

原创记录RN开发中遇到的兼容性问题

记录一些工作中遇到的兼容性问题Android1、如果无设置具体宽度，部分安卓手机会出现文字超出容器情况。 lgNormalText: { flex: 1, flexWrap: 'wrap', fontSize: S(28), }解决方法：给Text或Text容器设置具体宽度，不能使用flex：1 lgNormalText: { ...

2020-04-09 10:50:30 1667

原创 React Native init 0.60.3新项目xcode构建失败及eslint报错问题修复记录

1. XCode编译报错，由于Cocoa Pods不可用而导致在react-native init时'pod install'命令失败In file included from /Users/hjs/Desktop/rn-project/RNNewDemo/ios/RNNewDemo/AppDelegate.m:8:/Users/hjs/Desktop/rn-project/RNNewD...

2019-07-19 11:00:01 704

原创 react native 引入jest单元测试问题集锦

1. 当我们使用react native提供的Image组件时，引用本地图片“[email protected]”, “[email protected]”，“[email protected]”时，我们可以直接使用required('xxx.png')，为的是让系统去找到适配机型的图片。可是在执行单元测试时，结果会出现如下报错： ● Test suite failed to run Cannot find modul...

2019-06-19 11:32:50 1240

原创 [Exception] You are using pip version 9.0.1

Exception:Traceback (most recent call last): File "/Library/Python/2.7/site-packages/pip/basecommand.py", line 215, in main status = self.run(options, args) File "/Library/Python/2.7/site-pac...

2019-06-14 11:19:23 225

原创 npm-查看依赖库最新版本及历史版本指令记录

为了查看React Native项目用到的依赖包最新版本，记录下npm查看命令：npm view <packagename> versions --json

2019-05-15 14:59:55 9035

原创 react native 防重复点击组件

分享一个防重复点击组件import React, { PureComponent } from 'react';import { TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedback, TouchableOpacity, Platform } from 'react-native...

2019-04-21 01:39:07 780

原创 Android 进阶书籍及源码记录

《第一行代码》—— 郭霖书籍源码地址：https://github.com/guolindev/booksource《Android 群英传》 —— 徐宜生书记源码地址：https://github.com/xuyisheng/AndroidHeroesCSDN博客地址：https://blog.csdn.net/eclipsexys《Android开发艺术探索》—— 任玉刚...

2019-03-19 00:17:01 534

原创关于react-native-scrollable-tab-view自定义TabBar组件分享

为了更好自定义TabBar下划线样式，分享两个组件地址：https://github.com/aijason/react-native-scrollable-custom-tab-bar期待您的star！

2019-03-15 14:56:24 883

原创 Android Studio 项目代码运行正常,但是代码爆红处理记录

在Mac系统上运行Android项目时，编译正常但是代码爆红，很烦。处理方法记录：1. clean 项目，执行build。2. 运行invalidate cache / restart 重启项目。3. 找到项目.idea文件（项目根目录的隐藏文件），删除并重启项目即可。（此方法成功）Mac 上快速显示隐藏文件-快捷键“shift+cmmand+.” 。...

2019-03-13 10:11:20 1628

原创 React Native FlatList 避免上拉加载多次触发

1.设置onEndReachedThreshold（决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。）onEndReachedThreshold={0.2} 亲测添加此属性可以避免出现下拉刷新触发上拉加载的问题。2.在onMomentumScrollBegin属性中监...

2019-01-23 17:40:47 4544

原创 React Native Switch 组件大小自定义

React Native Switch 组件大小如何自定义？方法如下：<Switch style={{ transform: [{ scaleX: 0.5 }, { scaleY: 0.5 }] }}/>自定义缩放比例即可。

2019-01-03 19:25:30 2297

原创记React Native Text 显示数字加粗后最后一位无法显示问题

经用户反馈，金额显示最后一位在部分安卓机型上显示失败，这个问题截图如下：经验证，设置过fontWeight 属性的Text，在OPPO R9等机型确实有问题，解决方式是给Text加个fontFamily样式：fontFamily: 'System',设置后，能够正常显示。...

2018-12-13 16:36:56 2683 4

原创 react native 关于ScrollView嵌套WebView的交互问题

react native 关于ScrollView嵌套WebView的交互问题，这个问题很早前就解决过了，但是发现好多人有这方面问题，之前是因为写资讯的需求在网页下面还得显示评论等内容所以发现的这个问题，写个我的解决方案吧！首先常规下，WebView正常的展示网页： <SafeAreaView style={styles.safeAreaView}> <WebVi...

2018-12-06 11:53:55 3657 1

原创 JS 常用数组操作

1. pop, shiftvar arr = [1,2,3,4];// 4arr.pop();// 1arr.shift();// [2,3]arr;2. push, unshiftvar arr = [2, 3];// 3arr.unshift(1);// 4arr.push(4);// 6arr.push(5, 6);// [1,2,3,4,5,6]...

2018-12-03 14:10:36 905

原创 yarn 升级指令

yarn 升级最新版本npm install yarn@latest -g查看yarn历史版本npm view yarn versions --jsonyarn 升级指定版本（例：升级到1.21.3版本）yarn upgrade v1.21.3

2018-11-16 14:24:20 31917

原创 react native 实现TextInput分割验证码输入框自定义组件

如上图设计效果，是我们常见的需求效果，我的实现思路：1. 默认验证码值为空，使用lodash库中的padEnd方法末尾补齐五位空格，2. 我们通过split('')分割输入的字符串验证码为一个个数字的数组；3. 遍历分割后的数组，渲染每一个输入格的组件；4. 将TextInput组件和渲染好的五个输入格放在View的组件下包裹， TextInput组件可以尽可能小的显示；5...

2018-11-14 15:07:16 3346 2

原创 react native TextInput 键盘弹起点击两次才能触发子组件解决方案

关于react native TextInput 键盘弹起点击两次才能触发子组件解决方案：1. TextInput组件用ScrollView或FlatList组件包裹，给ScrollView或FlatList组件添加如下属性：keyboardShouldPersistTaps="handled"'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInpu...

2018-11-14 11:23:04 2841

原创关于react native code push 更新的设计攻略

方案一：（弹窗强更和静默更新）1. 我采用的是设置checkFrequency: CodePush.CheckFrequency.MANUAL，只有在调用CodePush.sync才检查更新；2. 然后通过CodePush.checkForUpdate返回是否强制热更新的参数isMandatory，如果isMandatory为true，我们就弹窗提示更新，并且将InstallMode设置为...

2018-11-01 18:17:32 456

原创 react native 实现浏览器唤醒APP并跳转指定页面

推荐使用react-navigation导航器提供的Deep linking 功能来实现。根据官方的例子来一步步实现：假设我们要实现在浏览器上通过点击URI（mychat://chat/Eric），跳转到一个名为“Eric”的用户的聊天页面。1. 首先，我们定义导航器：const SimpleApp = createStackNavigator({ Home: { scre...

2018-11-01 16:37:48 9599

原创关于react native code push的JS端配置攻略

1. 引用CodePush高阶组件，应用在项目根组件中：import CodePush from "react-native-code-push";class App extends Component {}const codePushOptions = { checkFrequency: CodePush.CheckFrequency.MANUAL };App = CodeP...

2018-10-29 21:05:20 654

原创 react native （附代码）实现热更新下载进度条弹窗Modal

1. 编写进度条Bar组件import React, { PureComponent } from 'react';import { View, Animated,} from 'react-native';import PropTypes from 'prop-types';import { getRealDP } from '../utils/utility';con...

2018-10-29 20:41:23 1982

原创关于react-native-code-push的原生集成攻略

注：此文集成code-push是基于自建热更新服务器来维护的，如果使用微软的热更新服务器集成有部分区别。首先通过npm 或者 yarn 将依赖下载下来：npm install --save react-native-code-push oryarn add react-native-code-push Android 集成1. 常规集成依赖，执行link，一键配置原生：...

2018-10-29 19:47:10 1079

原创解决React Native 'config.h' file not found以及WebSocket/libfishhook.a cannot be found

解决方法：在项目根目录下运行指令（也可能是glog-0.3.4目录） cd node_modules/react-native/third-party/glog-0.3.5 ../../scripts/ios-configure-glog.sh 重新编译运行即可。在XCode10上运行还可能有这样的报错，找不到libfishhook.a依赖库：error: B...

2018-10-08 11:18:06 1042 1

原创运行react-native init 新建0.57.1项目运行报错【`@babel/runtime/helpers/interopRequireDefault` does not exist】

2018-09-29 16:02:11.285108+0800 MyProject[42509:331244] Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module `@babe...

2018-09-29 16:31:00 6187

原创深入了解JS深复制与浅复制

面试常问到什么是深复制和浅复制（深拷贝和浅拷贝），怎么实现深复制，那么我们一起来探讨学习下。下面三句话可以初步理解深浅复制的区别：首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。深复制：复制的是引用(地址)，浅复制：复制的是实例。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。首先先了解ECMAScript 中的变量类型，分为两...

2018-09-05 16:59:08 599

原创简述RN组件constructor(){} 中加上 super()的作用

首先通过下述例子了解在es6中实现继承：class father{ constructor(name) { this.name = name } printName() { console.log(this.name) }}class children extends father{ construc...

2018-09-05 01:17:38 1934 1

原创 FlatList 组件性能优化理解

FlatList 之所以节约内存、渲染快，是因为它只将用户看到的(和即将看到的)部分真正渲染出来了。而用户看不到的地方，渲染的只是空白元素。渲染空白元素相比渲染真正的列表元素需要内存和计算量会大大减少，这就是性能好的原因。优化FlatList列表性能方法我总结为三种：1、getItemLayout 可选优化项。但是实际测试中，如果不做该项优化，性能会差很多。所以强烈建议做此项优化！...

2018-09-04 17:08:35 5298

原创 React Native开发使用Redux的原因

redux是一个具有可预测性的状态容器。能够更合理的长期维护项目，当项目页面多，功能复杂时，提升项目体验，避免出现页面渲染卡爆的问题。

2018-09-04 15:03:05 188

原创 RN开发的五大缺点

1. 项目版本更新维护较频繁；2. 整体性能仍不如原生；3. 涉及底层的功能需要Android和Ios双端单独开发，JS调用；4. 学习成本高；（需要熟悉原生）5. 试错成本高，有些问题较少解决方案，易耽误开发进度。...

2018-09-04 14:57:36 10864

原创使用React Native 的五大理由

1. 拥有大量开发人员的开源项目（open source）;2. 易于学习和使用（easy）;3. 跨平台兼容（Cross - Platform）;4. RN应用程序具有卓越性能(Great Performance)；5. 美丽和简化的用户界面开发（User Interface）。...

2018-09-04 14:52:26 242

原创 JS 纯函数的理解

纯函数：1. 一个函数的返回结果只依赖于它的参数；举个栗子：const a = (x, y) => x + y;console.log(a(1, 2)); // 3上述函数a在执行过程中，返回的结果只有x, y的参数值决定，不受外部参数影响。2. 且在执行过程里面没有副作用。副作用：一个函数执行过程对产生了外部可观察的变化。（修改了全局变量或修改传入的参数）...

2018-09-04 14:45:43 467

原创 RN （React Native）相对原生有哪些优势？

1. RN 一套代码可以跨平台使用；2. 减少人力，节省时间； 3. 避免了Android和IOS版本发布时间不同步；4. 开发新功能迅速；5. 更方便的增量更新。

2018-09-04 14:14:01 6285

原创 React Native 阴影效果双平台实现

React Native 阴影效果双平台实现, 安卓端引用'react-native-shadow'第三方依赖实现，ios端使用api提供的属性即可。（更好的方式可以用阴影底图让UI提供，据了解通过style设置阴影属性较消耗渲染性能）部分实现代码：（效果按自己需求调整）import {BoxShadow} from 'react-native-shadow';Shadow = ...

2018-08-10 12:33:24 6709

原创 React Native 防重复提交实现方法

import React, {Component} from 'react';import {TouchableOpacity} from 'react-native';{/**按钮防重复提交组件*/}export default class Touch extends Component { ToPress =()=>{ const {onPress} = th...

2018-08-06 16:13:01 1133

原创【已更新】修复react-navigation android 跳转card 模式与ios效果不同问题

本次修改是基于以下版本："react-navigation": "^2.5.3"修改方法如下步骤一：（在配置路由文件上导包）import StackViewStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator';步骤二：（在createStackNavi...

2018-07-06 11:11:46 910

移动开发技术分享