React-Native
文章平均质量分 63
作者日常工作经验中的各项RN实战知识,方便大家排查错误,也欢迎新同学学习新知识。
v朔一
技术只是工具,切莫设限。
展开
-
【React-Native】优雅的使用 babel 插件配置路径别名
项目里面如果引用的模块路径太深,则需要使用 ../../.. 的方式引用,十分不优雅,本文介绍了一种简短的引用方式并且IDE能够识别。原创 2022-04-09 22:23:29 · 2321 阅读 · 0 评论 -
【React-Native】如何做一个让旁边的妹子惊呼Amazing的动画?
前言&预览废话先不多说,直接上图!欢迎页如下图,每一个页面都有一个相类似的主题动画Loading动画如下图,用户名称输入正确后烟花特效及登录时的猫咪捕食 Loading多达12种 Loading 随机渲染思考时间(Brainstorming!)那么,大家想一想,如果让你在APP中加入酷炫的动画,你该怎么做呢?1.原生提供的 Animate,进行旋转、拉伸、位移等等?简单动画可以,但是不够酷炫。2.使用 GIF 图片可否?可以,但是不能控制启动,暂停;此外图片大小样原创 2021-07-27 10:05:15 · 315 阅读 · 0 评论 -
【React-Native 凉了?】React-Native 五个不为人知的秘密!
一、什么项目使用RN?什么项目都可以使用RN,对于资源、时间都吃紧的项目更是如此;当然如果资源充足,也可以使用原生架构,嵌入RN使用更佳。二、项目该怎么样进行版本升级?首先,尽量跟着官方版本走!!! 如果版本跨度太大,建议:1. init 一个新版本;2. 解决三方组件兼容性问题;3. 迁移源码并测试。三、热更新到底能不能上线?截止目前(2021年6月29日),我们项目中使用了热更新技术,正常上线!四、三方库不满足需求,如何修改源码?千万不要去直接修改node_module原创 2021-06-29 11:19:45 · 411 阅读 · 0 评论 -
【React-Native】iOS TextInput 仅允许输入一个汉字
今天,来了个需求,需要根据提示,输入完整的公司名称,而输入的内容只能是单个的汉字;然后,iOS端如果仅设置TextInput的maxLength 为 1的话,用户拼音是没法使用的,所以就选了个折中的方案:当用户输入汉字的时候,仅获取第一个!如下:import React, { useState } from "react";import { View, TextInput, Platform } from "react-native";export default function LoginP原创 2021-05-10 13:47:32 · 576 阅读 · 0 评论 -
【React-Native】快速升级RN版本指北针
大家都知道,RN经常在某个版本出现断层式的更新,以至于漏关注了某个版本后,想升级最新版本就会出现各种各样的报错。那么,有没有什么方法可以完美的更新呢?答案是没有!!!!!!想要傻瓜式一键更新可以关闭本文了。...原创 2021-03-11 23:15:56 · 719 阅读 · 0 评论 -
【React-Native】couldn‘t find dso to load: libfbjni.so
噢,我也是快崩溃了,在我把我项目升级到最新的RN版本(0.63.4)后,iOS一切良好,android竟然启动就闪退!!!排查了半天,最后,使用如下命令解决!!!!react-native start --reset-cachecd android && ./gradlew clean特此记录。...原创 2021-03-10 21:19:17 · 1868 阅读 · 0 评论 -
【React-Native】基于react-native-echarts-pro图表库的地图展示
由于业务需要展示世界地图,并且对地图数据进行操作;前期选用native-echarts,但是该组件有三个问题:1.长期不维护;2.echarts版本较老;3.没有自带的地图功能;故有了该组件的诞生,废话不多说,上手:一、...原创 2020-12-31 15:10:12 · 5291 阅读 · 7 评论 -
【React-native】JS + Modal 实现app安全键盘 react-native-supervons-custom-keyboard
最近有个需要,在密码输入的时候,使用安全键盘;一开始想直接找三方组件,但是没有合适的,唯一一个是 react-native-security-keyboard,但还只有数字,所以就基于这个组件开撸!在这里感谢原作者 yanzhandong的分享。先上效果:Demo 地址:https://github.com/supervons/ExploreRN功能:...原创 2020-03-21 11:03:09 · 1185 阅读 · 0 评论 -
【React-native】Pod install 安装失败原因分析
安装失败报一堆错误,Xcode设置下: 修改镜像源,请参考这里:https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/; 使用移动网络4g网络或者【越-过-高-墙】。成功后记得备份!!!...原创 2020-01-12 16:23:53 · 4306 阅读 · 0 评论 -
【React-native】扫一扫组件的使用
之前有搞过相机组件,如今也遇到了需求,顺便记录一下。主要分为以下三步:组件版本及实现功能介绍。 安装使用。 界面实现。先上最终实现效果图:一,版本介绍以下是项目中使用的版本信息:"react": "16.8.6","react-native": "0.60.5","react-native-camera": "^3.8.0"想实现的功能是,可以扫描二...原创 2019-10-27 15:46:08 · 2323 阅读 · 0 评论 -
【React-native】 "Unexpected keys "xxx" found in previous state received by the reducer.Unexpected key
今天,莫名启动项目发现一个报错,如下:造成原因:使用redux-persist 缓存 redux 中的数据,两个不同项目中的persistConfig 中 key 相同了。解决:persistConfig 中 key 每个项目保持唯一:const persistConfig = { key: '1560392485_project', // 对于数据 key...原创 2019-08-29 11:31:33 · 1909 阅读 · 0 评论 -
【React-native】react-native + react-navigation 实现更换皮肤完全教程
想实现一个更换 app 整体色调(导航头,tabBar 以及按钮)的功能,比如在晚上可以换成黑色保护眼睛,亦或者选用户自己喜欢的颜色。先放具体的实现效果图:整体思路在 App.js 中,添加一个全局变量 screenProps,把颜色变量放在其中,然后再添加监听,当颜色改变时,触发监听,修改 state 中的颜色值,达到颜色重新渲染。 在 router 配置文件中,配置颜色从 s...原创 2019-08-23 10:39:10 · 1590 阅读 · 5 评论 -
【React-native】Redux 全家桶实用指南
今天,想实现用户第一次登录后,下次免登录的功能。不难,但之前是用realm 数据库来实现的,就存一个用户信息,用 realm 难免有点杀鸡用牛刀之意,就想用 Redux 来实现,顺带温习下知识。本文涉及到的组件有:react-redux 及 redux ( 基础 ) redux-persist ( 用于缓存 ) redux-thunk ...原创 2019-08-20 22:18:01 · 1200 阅读 · 0 评论 -
【React-native】react-navigation 3.x 自定义切换动画
继我们接入了react-navigation 作为导航,并且实现android从右往左滑,那我现在又想各个页面切换的时候动画自定义,那该怎么搞?【往期:android从右往左滑:https://blog.csdn.net/qq934235475/article/details/99436772】这就需要我们对 router 的配置文件进行更改了,总体思路就是,跳转时传入一个参数(暂且...原创 2019-08-14 16:30:28 · 2420 阅读 · 0 评论 -
【React-native】react-navigation 3.x 仿 iOS 的push 从右往左过渡导航
之前用的是 react-navigation 2.x 的版本,升级 3.x 之后,发现StackViewStyleInterpolator 并没有在 react-navigation 模块中了。如下,需要安装:npm install react-navigation-stack由于我的 react-native 比较高,故不用 link注意,安装之后,在 router 的配...原创 2019-08-13 15:17:25 · 1053 阅读 · 0 评论 -
【React-native】极光推送获取用户id以及点击事件跳转
获取用户id,如下所示,在每次用户登录app都重新获取,然后把该id传给后台绑定,来达到标识用户。import JPushModule from "jpush-react-native";JPushModule.getRegistrationID((registerId)=>{ console.log(registerId)})在用户收到通知并点击时,有一个点击事件...原创 2019-07-31 10:12:39 · 1165 阅读 · 0 评论 -
【React-native】RN react-native run-android Execution failed for task ':app:processDebugManifest'.
莫名其妙,项目出现这个错误,昨天还好好的。Execution failed for task ':app:processDebugManifest'.> Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentF...原创 2019-06-18 18:23:42 · 832 阅读 · 0 评论 -
【React-native】轻松从零搭建微软Code-Push热更新
总体步骤:前提:需要 mac 电脑(iOS需要,仅安卓Win亦可),RN iOS/android 环境搭建好,服务器一台(最好linux),mysql 数据库以及 git 和 npm 环境。 搭建服务器,下载code-push项目,npm install安装,配置数据库,生成数据库表。 打开阿里云3000端口,运行测试。 本地安装code-push-cli,获取token,推送应...原创 2019-06-12 17:15:10 · 977 阅读 · 0 评论 -
【React-native】Redux 简洁教程
项目复杂度虽然不足以用到 Redux,但是个人很感兴趣,故来试试Redux。可以用于项目的状态管理(子页面改变父页面 state 值,兄弟组件之间共享状态)如下效果(尴尬,录屏软件不能用了):主页中存储 redux 中的值,value 为 redux,红字部分在子页面中,更改值,如下图,更改为 haha,下图中的加减数值亦是 redux 管理。父页面一并更改...原创 2019-04-01 20:26:45 · 311 阅读 · 0 评论 -
【React-native】RN 调 iOS 原生活体识别SDK进行数据交互
目前想调用第三方(某图场景)的活体识别,但是官网明明写着,有 H5 的方式,但是提供的 SDK 只有原生的,所以需要调原生,并且是在原生中调用三方的检测页面,然后回调结果给 RN。总体的思路:如下图所示,我们的核心点在于对 RCT 的单例设计以及回调的使用。总体的步骤:1,RN 页面引入 NativeModules2,编写原生桥接页面(这里桥接 RN 页面与三方活体识...原创 2019-05-23 11:06:13 · 770 阅读 · 0 评论 -
【React-native】结合 NativeBase & FlatList 的 api 数据设计及使用
首先,官方地址:https://docs.nativebase.io/Components.html#card-image-headref效果展示,这里使用的是Card image(PS:这里用了才看的阿丽塔战斗天使,哇咔咔,好看): 版本:"native-base": "^2.6.1","react": "^16.2.0","react-native": "^0.53.0&q原创 2019-02-27 10:20:08 · 1072 阅读 · 0 评论 -
【React-native】怎么样写一个螺旋酷炫的动画加载组件
近来想研究新的动画加载组件,找到了一个react-native-spinkit ,感觉使用起来很不错,记录一下使用的过程。效果展示:其他动画效果:那么,让我们提起裤子开干吧!环境版本: "react": "^16.2.0", "react-native": "^0.53.0", "react-native-spinkit": "^1.1.1",...原创 2019-02-22 15:20:59 · 3083 阅读 · 0 评论 -
【React-native】导航组件 react-navigation 的使用
之前项目一直用的老版本的React-native(0.35.0),新的导航组件一直没有接触,近来想接触,但是找了半天却发现都实现不了,后来终于折腾好了,所以记录一下。谈组件不写清楚版本完全就是耍流氓!谈组件不写清楚版本完全就是耍流氓!谈组件不写清楚版本完全就是耍流氓!恶心的事儿说三遍!我所使用的 react-native,react-navigation以及所需react-na...原创 2019-01-21 18:08:41 · 452 阅读 · 0 评论 -
【React-native】安卓运行报错 Could not install the app on the device, read the error above for details.
RN在IOS运行一切正常,准备去Android端测试发现报错,但是我设备启着的,于是乎根据提示./gradlew installDebug,却说我Permission denied错误截图:可能原因一gradlew权限不足导致react-native run-android失败解决方案执行如下命令:chmod +x gradlew可能原因二安卓运行后...原创 2018-12-19 23:54:12 · 3808 阅读 · 9 评论 -
【React-native】基于 PanResponder 实现滑动返回
写在前新开了一个项目,想实现用户侧滑返回功能,来增进用户浏览体验。PS:在0.44之后的版本包含了react-navigation,其中自带的侧滑返回体验良好(可参考WX侧滑),本文章针对0.44以下版本可以参考。前置了解用的了手势系统,可以先行补课 https://reactnative.cn/docs/0.40/panresponder/ 功能实现先上代码,需要导入...原创 2018-12-13 16:49:07 · 2420 阅读 · 0 评论 -
【React-native】基于 DES 动态 Token 验证的设计方案
前提:由于现有框架已经形成,但是需要增加在每次调用api的时候,进行token认证,认证通过才能允许访问接口。以防止越权访问。所以,准备在代价最小的情况下,进行修改。总体思路:1,在app登录成功后,服务端生成一个长达200的字符序列(不重复,当然也可以是500,1000)存入数据库,同时返回给app。2,app拿到序列后,每次访问接口,在header里用该序列中的一个加上用户id(...原创 2018-11-22 10:43:14 · 1157 阅读 · 0 评论 -
【React-native】<Image> 组件如何从前一界面动态获取 source
今天,想通过前一界面传source的地址来对通用页面的图片样式进行更改,而不是单一的死地址,但是前一页面直接传地址的字符串是不行的,会报错,经研究,发现使用如下方式即可。父界面:在父界面中,给定一个属性,值直接为 require('../../image/payment.png') <CommonWeights dataSo...原创 2018-11-16 16:09:48 · 980 阅读 · 0 评论 -
【React-native】React-native键盘遮挡TextInput,使用 KeyboardAvoidingView 解决
想要完美的输入体验,键盘是千万不能遮挡的,而且在最后一项输入的时候,底部的 【提交/登录】按钮需要弹上来显示,那么,让我们来解决这个问题吧。首先,安装组件npm i react-native-keyboard-aware-scroll-view --save然后,用如下包裹你的 input 输入组件<KeyboardAwareScrollView ext...原创 2019-02-28 23:34:10 · 924 阅读 · 0 评论 -
【React-native】侧滑组件 React-native-side-menu 的使用
本教程使用【侧滑组件】 + 【模态层】 实现侧滑显示消息列表并且点击显示消息详情。模态层基础传送门:https://blog.csdn.net/qq934235475/article/details/82145119废话不多说,先来效果图 【侧滑的组件效果比较简陋,当然亦可是酷炫的页面(类似qq侧滑等)】:组件介绍安装组件:npm install react-native...原创 2018-10-31 11:02:39 · 2609 阅读 · 2 评论 -
【React-native】通过 Modal 模态弹出框制作二维码分享
由于客户需要,在点击分享时,展示二维码供其他客户扫码下载app,故使用此组件来解决。先上效果:官方说明:Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity)。在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。常用属性:ani...原创 2018-08-28 12:52:56 · 1213 阅读 · 0 评论