![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react native
aijason
这个作者很懒,什么都没留下…
展开
-
解决初始化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 · 2232 阅读 · 0 评论 -
记录RN开发中遇到的兼容性问题
记录一些工作中遇到的兼容性问题Android1、如果无设置具体宽度,部分安卓手机会出现文字超出容器情况。 lgNormalText: { flex: 1, flexWrap: 'wrap', fontSize: S(28), }解决方法:给Text或Text容器设置具体宽度,不能使用flex:1 lgNormalText: { ...原创 2020-04-09 10:50:30 · 1691 阅读 · 0 评论 -
react native 实现TextInput分割验证码输入框自定义组件
如上图设计效果,是我们常见的需求效果,我的实现思路:1. 默认验证码值为空,使用lodash库中的padEnd方法末尾补齐五位空格,2. 我们通过split('')分割输入的字符串验证码为一个个数字的数组;3. 遍历分割后的数组,渲染每一个输入格的组件;4. 将TextInput组件和渲染好的五个输入格放在View的组件下包裹, TextInput组件可以尽可能小的显示;5...原创 2018-11-14 15:07:16 · 3371 阅读 · 2 评论 -
react native 关于ScrollView嵌套WebView的交互问题
react native 关于ScrollView嵌套WebView的交互问题,这个问题很早前就解决过了,但是发现好多人有这方面问题,之前是因为写资讯的需求在网页下面还得显示评论等内容所以发现的这个问题,写个我的解决方案吧!首先常规下,WebView正常的展示网页: <SafeAreaView style={styles.safeAreaView}> <WebVi...原创 2018-12-06 11:53:55 · 3671 阅读 · 1 评论 -
记React Native Text 显示数字加粗后最后一位无法显示问题
经用户反馈,金额显示最后一位在部分安卓机型上显示失败,这个问题截图如下: 经验证,设置过fontWeight 属性的Text,在OPPO R9等机型确实有问题,解决方式是给Text加个fontFamily样式:fontFamily: 'System',设置后,能够正常显示。...原创 2018-12-13 16:36:56 · 2702 阅读 · 4 评论 -
React Native Switch 组件大小自定义
React Native Switch 组件大小如何自定义?方法如下:<Switch style={{ transform: [{ scaleX: 0.5 }, { scaleY: 0.5 }] }}/>自定义缩放比例即可。原创 2019-01-03 19:25:30 · 2323 阅读 · 0 评论 -
React Native FlatList 避免上拉加载多次触发
1.设置onEndReachedThreshold(决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。)onEndReachedThreshold={0.2} 亲测添加此属性可以避免出现下拉刷新触发上拉加载的问题。2.在onMomentumScrollBegin属性中监...原创 2019-01-23 17:40:47 · 4593 阅读 · 0 评论 -
关于react-native-scrollable-tab-view自定义TabBar组件分享
为了更好自定义TabBar下划线样式,分享两个组件地址:https://github.com/aijason/react-native-scrollable-custom-tab-bar期待您的star!原创 2019-03-15 14:56:24 · 889 阅读 · 0 评论 -
react native 防重复点击组件
分享一个防重复点击组件import React, { PureComponent } from 'react';import { TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedback, TouchableOpacity, Platform } from 'react-native...原创 2019-04-21 01:39:07 · 794 阅读 · 0 评论 -
npm-查看依赖库最新版本及历史版本指令记录
为了查看React Native项目用到的依赖包最新版本,记录下npm查看命令:npm view <packagename> versions --json原创 2019-05-15 14:59:55 · 9066 阅读 · 0 评论 -
[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 · 228 阅读 · 0 评论 -
react native 引入jest单元测试问题集锦
1. 当我们使用react native提供的Image组件时,引用本地图片“xxx@1x.png”, “xxx@2x.png”,“xxx@3x.png”时,我们可以直接使用required('xxx.png'),为的是让系统去找到适配机型的图片。可是在执行单元测试时,结果会出现如下报错: ● Test suite failed to run Cannot find modul...原创 2019-06-19 11:32:50 · 1283 阅读 · 0 评论 -
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 · 712 阅读 · 0 评论 -
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 · 374 阅读 · 0 评论 -
react native TextInput 键盘弹起点击两次才能触发子组件解决方案
关于react native TextInput 键盘弹起点击两次才能触发子组件解决方案:1. TextInput组件用ScrollView或FlatList组件包裹,给ScrollView或FlatList组件添加如下属性:keyboardShouldPersistTaps="handled"'handled',当点击事件被子组件捕获时,键盘不会自动收起。这样切换TextInpu...原创 2018-11-14 11:23:04 · 2874 阅读 · 0 评论 -
关于react native code push 更新的设计攻略
方案一:(弹窗强更和静默更新)1. 我采用的是设置checkFrequency: CodePush.CheckFrequency.MANUAL,只有在调用CodePush.sync才检查更新;2. 然后通过CodePush.checkForUpdate返回是否强制热更新的参数isMandatory,如果isMandatory为true,我们就弹窗提示更新,并且将InstallMode设置为...原创 2018-11-01 18:17:32 · 473 阅读 · 0 评论 -
react native 实现浏览器唤醒APP并跳转指定页面
推荐使用react-navigation导航器提供的Deep linking 功能来实现。根据官方的例子来一步步实现:假设我们要实现在浏览器上通过点击URI(mychat://chat/Eric) ,跳转到一个名为“Eric”的用户的聊天页面。1. 首先,我们定义导航器:const SimpleApp = createStackNavigator({ Home: { scre...原创 2018-11-01 16:37:48 · 9730 阅读 · 0 评论 -
【已更新】修复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 · 914 阅读 · 0 评论 -
React Native 阴影效果双平台实现
React Native 阴影效果双平台实现, 安卓端引用'react-native-shadow'第三方依赖实现,ios端使用api提供的属性即可。(更好的方式可以用阴影底图让UI提供,据了解通过style设置阴影属性较消耗渲染性能)部分实现代码:(效果按自己需求调整)import {BoxShadow} from 'react-native-shadow';Shadow = ...原创 2018-08-10 12:33:24 · 6720 阅读 · 0 评论 -
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 · 1150 阅读 · 0 评论 -
RN (React Native)相对原生有哪些优势?
1. RN 一套代码可以跨平台使用;2. 减少人力,节省时间; 3. 避免了Android和IOS版本发布时间不同步;4. 开发新功能迅速;5. 更方便的增量更新。原创 2018-09-04 14:14:01 · 6311 阅读 · 0 评论 -
使用React Native 的五大理由
1. 拥有大量开发人员的开源项目(open source);2. 易于学习和使用(easy);3. 跨平台兼容(Cross - Platform);4. RN应用程序具有卓越性能(Great Performance);5. 美丽和简化的用户界面开发(User Interface)。...原创 2018-09-04 14:52:26 · 244 阅读 · 0 评论 -
RN开发的五大缺点
1. 项目版本更新维护较频繁;2. 整体性能仍不如原生;3. 涉及底层的功能需要Android和Ios双端单独开发,JS调用;4. 学习成本高;(需要熟悉原生)5. 试错成本高,有些问题较少解决方案,易耽误开发进度。...原创 2018-09-04 14:57:36 · 10898 阅读 · 0 评论 -
React Native开发使用Redux的原因
redux是一个具有可预测性的状态容器。能够更合理的长期维护项目,当项目页面多,功能复杂时,提升项目体验,避免出现页面渲染卡爆的问题。原创 2018-09-04 15:03:05 · 188 阅读 · 0 评论 -
FlatList 组件性能优化理解
FlatList 之所以节约内存、渲染快,是因为它只将用户看到的(和即将看到的)部分真正渲染出来了。而用户看不到的地方,渲染的只是空白元素。渲染空白元素相比渲染真正的列表元素需要内存和计算量会大大减少,这就是性能好的原因。优化FlatList列表性能方法我总结为三种:1、getItemLayout 可选优化项。但是实际测试中,如果不做该项优化,性能会差很多。所以强烈建议做此项优化!...原创 2018-09-04 17:08:35 · 5343 阅读 · 0 评论 -
简述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 · 1947 阅读 · 1 评论 -
解决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 · 1046 阅读 · 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 · 6218 阅读 · 0 评论 -
关于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 · 1083 阅读 · 0 评论 -
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 · 1998 阅读 · 0 评论 -
关于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 · 662 阅读 · 0 评论