![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react-native
文章平均质量分 53
iOSTianNan
这个作者很懒,什么都没留下…
展开
-
[RN Clipboard] Clipboard组件无法支持iOS16 下的粘贴处理
原因是 项目目前是 API 28 , 只有API 29 (android 10 / Android Q ) 才支持。3.Android下会自动linked on build。由于要支持Android 9 , 所以只能 把。原来的Clipboard使用的是。但在iOS16下无法进行粘贴。2.iOS 下 需要。原创 2023-03-07 16:50:49 · 401 阅读 · 0 评论 -
iOS/Android 纪念模式(黑白灰模式) 记录
近年来各种公祭活动比较多,APP也应把哀悼模式纳入设计。目前方案一可以让APP全部灰度。转载 2022-12-01 09:46:31 · 632 阅读 · 0 评论 -
RN - 2022年11月4日 - RN官方最新修复Android端编译/构建问题处理
继11月1日出现的jcenter问题处理好之后, 紧接着又出现了RN编译/打包的最新问题,大面积报错 找不到符号 等库链接问题NDK不支持报错提示等查阅RN官方后发现。原创 2022-11-08 10:56:21 · 735 阅读 · 1 评论 -
FastLane自动化打包报错: An exception has occurred: issuerId is required
一周没有使用fastlane打包, 报错提示。能下载到2.3.0的话, 会替换3.0.0。推荐大家回退到2.3.0老版本可以有效。无奈2.3.0在苹果里面是下不到了…下载链接里面, 只会保留最新的。最后搜索到github中有解释。原创 2022-10-21 16:30:47 · 714 阅读 · 0 评论 -
RN ScrollView简单实现无限轮播
如上图所示, 需要实现一个简单的上翻轮播图, 展示最新的三条数据。原创 2022-09-20 17:39:23 · 397 阅读 · 0 评论 -
ReactNative:Running ‘[node, -e, console.log(require(‘react-native/cli’).bin);]’ command failed.
报错查看日志发现:我这边的最终解决办法1.关掉AndroidStudio2. 执行参考地址原创 2022-07-06 10:55:26 · 670 阅读 · 0 评论 -
Fastlane 一键打包/发布APP - 使用记录及踩坑
安装fastlanefastlane的安装和使用Fastlane 官方文档fastlane自动化打包(android)idea使用vs code , 可以安装一些代码片段插件,快速上手传参写法命令行调用日志输出issuer_id这个必须是主账户才能看到iOS端 步骤 (默认已经做好环境配置)3.编写 Fastfile 文件4. .p8文件放入 ./fastlane文件目录5. Fastfile文件代码如下android端 步骤 (默认已经做好环境配置)安装插件的一些坑可原创 2022-06-30 15:06:12 · 1568 阅读 · 0 评论 -
记一次 Showing Recent Errors Only Command /bin/sh failed with exit code 1 问题
大概报错如图所示在Mac钥匙串中发现哪怕是重新创建的开发者证书, 都提示 证书不受信任可能是因为误删了重新下载这两个文件, 安装即可证书1证书2双击安装后 可以发现iOS的开发/发布证书都是绿色的, 此时再去重新运行XCode就可以了...原创 2022-06-28 13:49:28 · 605 阅读 · 0 评论 -
can‘t find gem cocoapods (>= 0.a) with executable pod (Gem::GemNotFoundException)
RN 0.67.0及以上版本, 需要ruby 2.7.4 cocoapods >= 1.11.2但是通过rvm 切换到 ruby 2.7.4,执行 会报错如下操作同Could not find ‘json‘ (>= 1.5.1) among 45 total gem(s)应该是切换到新版本的ruby , 需要重新安装原创 2022-06-10 11:04:47 · 2590 阅读 · 0 评论 -
Could not find ‘json‘ (>= 1.5.1) among 45 total gem(s)
RN 0.66/0.67版本 需要ruby 2.7.4, 执行pod install 报错原创 2022-06-10 10:25:05 · 1816 阅读 · 0 评论 -
RN - iOS - ScrollView联动滚动卡顿问题处理记录
RN 列表联动卡顿问题 iOS 卡顿, 上下左右滚动效果, 卡顿,原创 2022-06-09 13:04:26 · 1473 阅读 · 7 评论 -
RN-iOS 原生向RN发送消息....
iOS向RN发送消息监听, RN监听, 实现原生向RN发送消息原创 2022-05-26 09:53:26 · 550 阅读 · 0 评论 -
RN - iOS端后台挂起后30s重启问题处理过程与心得
rct.timging.gb.task报错RN 框架 iOS 挂起后重启、杀死、闪退原创 2022-05-25 18:49:28 · 2164 阅读 · 0 评论 -
RN-升级XCODE13.3.1 编译 _initializeModules:(NSArray<id<RCTBridgeModule>> *)modules 报错
2022_05_05:由于必须上传App Store必须要求xcode升级, 结果升级后编译报错Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *'这种大概两三个同类型的错误解决方案在此:目前采用第一种方案 复制粘贴到Podfile ,执行 pod install 即可post_in转载 2022-05-05 18:55:36 · 372 阅读 · 0 评论 -
RN - 封装Android原生WebView组件,实现JS获取原生消息回调及JS控制native组件
基于RN 调用原生WebPage 解决微信支付Referer问题的继续扩展1.实现网页goBack2.实现实时获取网页Title显示在NavBar上native向RN发送消息事件,RN获取native消息回调JS操作native组件原创 2022-03-09 14:28:31 · 908 阅读 · 0 评论 -
【微信授权登录失败】Universal Link check failed 第5步问题解决(授权二次确认弹框问题)
微信登录授权二次确认,回调无反应, 微信自检第5步失败 :Universal Link check failed问题解决原创 2021-12-01 19:21:16 · 4514 阅读 · 0 评论 -
React-Naivgation 侧滑动画配置以及单独配置
目前基于 "react-navigation": "^4.1.0",先贴一下项目目前公共配置/** * * @auther: tiannanyihao * @date: 2020-10-13 17:53 * @profile: StackConfig * @project: ebankhome-app * @description: 几个路由栈公共的config配置 * */import {CardStyleInterpolators} from 'react-navigat原创 2021-11-02 10:42:39 · 272 阅读 · 0 评论 -
RN 调用原生WebPage 解决微信支付Referer问题
安卓原生webView代码BXReactWebViewManager.javapackage com.regan.ebankhome;import android.annotation.SuppressLint;import android.content.Intent;import android.net.Uri;import android.net.http.SslError;import android.util.Log;import android.webkit.SslError原创 2021-10-27 15:10:10 · 1563 阅读 · 0 评论 -
RN PermissionsAndroid 权限一览
CALENDAR’ 日历CAMERA’ 相机CONTACTS’联系人CONTACTS’联系人ACCOUNTS’账户ACCESS FINE LOCATION’ 获得好位置ACCESS COARSE LOCATION’ 访问粗定位RECORD AUDIO’ 记录音频READ PHONE_STATE’ 读取手机状态CALL PHONE’ 电话手机READ CALL_LOG’ 看通话记录的WRITE CALL_LOG’ 写通话记录的ADD VOICEMAIL’ 添加语音信箱USE原创 2021-02-25 13:34:19 · 533 阅读 · 0 评论 -
借助React-Navigation4.x 实现类似iOS的willAppear/willDisAppear/didAppear等生命周期
如何在RN里头实现 路由级别的page组件的生命周期监听? 或者说,子路由页面要返回父路由页面,能让父页面刷新,有没有类似原生(比如iOS的ViewController)的什么周期方法?子页面返回刷新问题RN都是由组件组成的,路由级别的组件也是组件. 目前RN的生命周期组件里头,也就一个didMount能和原生类似,要实现子页面返回父页面刷新callBack消息监听以及发送以上两种方式比较常见.如果借助 React-Navgation 4.x /5.x ,我们还可以有 thi.原创 2021-02-05 15:40:11 · 632 阅读 · 0 评论 -
RN measure获取元素坐标失效问题 (仅安卓端)
功能描述1 ScrollView 嵌套一个FlatList, FlatList 上面有一个筛选Bar, 当滚动到顶部时, 需要将筛选Bar吸顶,借助 stickyHeaderIndices 属性.可以轻易实现吸顶问题, 然而吸顶后,需要我们处理一下刘海屏等与顶部的间距问题,2.因此使用了 measure 来获取该筛选Bar 的Y/top 坐标, 当一定范围后, 加载或隐藏一个垫片视图,3.iOS ok , 但是Android发现 measure 失效4, 发现 measure 与 stick原创 2021-02-03 15:20:47 · 1042 阅读 · 0 评论 -
Mobx 组件render刷新失败问题 -版本问题
如题最近将项目中的Redux 替换为 Mobx,后来发现使用过程中,执行action之后, 数据缺失同步改变了,但是render里面没有刷新,在排除了使用上的问题以后,还是不能解决最后感谢这位老哥mobx数据更新,组件未刷新问题主要问题还是mobx 版本问题通过降版本问题得以解决希望能帮助到有同样问题的人这里还有会遇到安装好指定版本的 mobx mobx-react之后提示你必须安装mobx-react-lite,再手动安装一下mobx-react-lite 即可...原创 2020-11-27 16:01:42 · 890 阅读 · 2 评论 -
RN 添加字体
iOS放进iOS项目根目录info.plist 添加一下垃圾Xcode info.plist 竟然展示不全2 android直接放进fonts目录, 没有fonts就自己创建然后就在RN里直接用吧原创 2020-11-06 09:08:51 · 631 阅读 · 0 评论 -
[React-Native] React-navigation 4.x createAnimatedSwitchNavigator 切换问题
近期遇到一个问题,使用createAnimatedSwitchNavigator 创建的时候, 发现navigate跨栈到别的路由, 会出现下一个页面和上一个页面重叠问题这个主要还是由于动画设置不对造成的原代码const AppNavigators = (initRoutename = 'AD') => { return createAnimatedSwitchNavigator( { Init: InitNavigator, AD: ADNavigator原创 2020-10-13 16:40:34 · 284 阅读 · 0 评论 -
React-native 接入极光推送,iOS端编译报错问题解决
进行一个RN项目要接入极光先说一下我的环境版本 "react-native": "0.61.0", "jcore-react-native": "^1.8.0", "jpush-react-native": "^2.8.1",Android接入正常,实现了广播/别名推送等iOS端接入SDK后, 也遇到一些编译报错问题,这里做一个记录,先简单总结一下:iOS 接入jPush, 使用pod install 即可, 不需要额外配置什么东西,那为什么还会报错, 是因为你的p原创 2020-09-25 10:30:31 · 584 阅读 · 0 评论 -
React-Native onNavigationStateChange 在安卓端监听失败
React-Navigate-WebView, 提供的 /** * Function that is invoked when the `WebView` loading starts or ends. */ onNavigationStateChange?: (event: WebViewNavigation) => void;在iOS端调用是OK的,在Android端, 首次进入OK, 之后在进行跳转问题失效…解决办法H5 基于Vue开发, 在二次链接原创 2020-09-01 16:48:05 · 953 阅读 · 0 评论 -
Flutter 启动页适配
参考文章Flutter 开发 Android & IOS 启动页 splash pagFlutter 启动页(闪屏页)具体实现和原理分析Flutter启动流程和原理分析需要知道的iOS13 开始 苹果要放弃LaunchImage适配启动图 , 改为必须走LaunchScreen.sb来启动所以在iOS端,启动图适配,要么使用LaunchScreen.sb 内嵌UIImageView +AutoLayout 来适配(依旧使用整图), 要么就采用 页面布局的方式, 来开发启动页,具体可以原创 2020-08-25 18:03:01 · 3554 阅读 · 0 评论 -
RN- 判断安卓是否是全面屏及是否开启了全面屏
RNScreenpxModule 安卓的桥接模块,用来判断机型是否是全面屏以及是否开启了全面屏,通过这个模块, 来适配一些RN中安卓全画幅的UI高度package com.regan.ebankhome;import android.app.Activity;import android.content.Context;import android.graphics.Point;import android.os.Build;import android.provider.Setting原创 2020-06-23 10:15:47 · 1627 阅读 · 0 评论 -
Text strings must be rendered within a Text component的一个情况
Invariant Violation: Text strings must be rendered within a <Text> component.This error is located at: in RCTView (at FriendposterShareDetail.tsx:345) in RCTView (at src/index.js:292)遇到如上的错误导致闪退问题.一般来说,是jsx中文字或者某些手误导致一些字符串没有被合适的组件包裹,如原创 2020-06-18 13:28:24 · 4409 阅读 · 0 评论 -
getDerivedStateFromProps / shouldComponentUpdate 结合使用,保护子组件不受父组件非必要的render影响
记录一下逻辑遇到一个问题, 用某个第三方的组件时, 有其他的stata触发了render, 导致该三方组件进行了渲染, 从容在UI上发现异常, 为了保护该第三方组件不收其他影响, 同时要确保该第三方组件的正常逻辑功能可用, 我们可以用 getDerivedStateFromProps 来进行逻辑处理, 必要时更新state , 用shouldComponentUpdate 来决定必要时进行render,解释下逻辑,要支持 props.goodmorningData 可能没有, 需要响应2.要支持原创 2020-06-12 11:28:46 · 828 阅读 · 0 评论 -
react-native-svg 绘制异形遮罩层 实现曲线模糊背景效果
最近有个需求, 大致如下需要实现上述UI, 同时需求根据轮播广告页, 变换后面高斯背景的色调,实现方案借助 react-native-blur 放置一个高斯背景,绘制一个贝塞尔曲线的MaskView, (react-native-svg)最后放上轮播图, 进行滚动变换即可贝塞尔遮罩的实现借助 react-native-svgsvg使用的参考链接:react-native-svg的使用H5 svg画贝塞尔曲线方法具体实现代码interface MaskViewProps {原创 2020-05-25 13:59:20 · 1514 阅读 · 0 评论 -
React-navigation 4.x tabBarButtonComponent的使用和自定义
其实标题不算准确, 这里的自定义是指 自定义React-navgation4.x 中, bottomTabBar中的几个可以点击的bottomTabbarButton ( 底部tabBar按钮), 姑且我这样描述,参考链接:1.React Navigation 3x系列教程』createBottomTabNavigator开发指南2.React-navigation4.x 官网3.自定义react-navigation的TabBarComponent4.React Navigation(一).原创 2020-05-22 10:49:24 · 739 阅读 · 0 评论 -
react-native 关于resizeMode 的图解
说来说去, 还是没图没真相原图readonly contain: “contain”; //完全展示, 一旦不匹配, 就有可能上下或左右有留空(白)readonly cover: “cover”; // 按左右或上下的最下比例分割, 确保尽量展示readonly stretch: “stretch”; // 不考虑比例, 直接压缩展示全图readonly center: “center”; // 选取中心点, 然后展示, 图片不压缩,但是展示不全应该说的够直白了原创 2020-05-12 13:47:51 · 712 阅读 · 0 评论 -
React-Navigation 4.x 安卓仿iOS 切换页面样式设置 push/native
React-Navigation 4.x 使用官网注意 CardStyleInterpolators 导入的地址是import {CardStyleInterpolators} from 'react-navigation-stack/src/vendor/index'使用{ // initialRouteName: 'CustomerFilePage', heade...原创 2020-04-28 18:06:02 · 471 阅读 · 0 评论 -
RN -频繁点击的几个情况及处理
待完善!1当某个方法被多次频繁调用, 通过该方法进行拦截,效果: 多次调用同一函数, 仅最后一次调用生效,其余调用均抛弃var actionAwaitTimer = null; // 定时器// 多次点击, 仅执行最后一次点击的事件const actionAwait = (fn, wait = 100) => { return function (params) { ...原创 2020-04-28 15:40:55 · 591 阅读 · 0 评论 -
textAlign: 'right' 导致TextInput 组件在ScrollView中,阻止ScrollView上下滑动手势
React-native textAlign: 'right' 导致TextInput 组件在ScrollView中,阻止ScrollView上下滑动手势在Android机器中, 用一个ScrollView包裹多个TextInput组件, 当TextInput组件样式设置了 textAlign: ‘right’ 时, 手势移动, ScrollView 组件不能上下滑动具体看 git...原创 2020-04-24 13:36:43 · 333 阅读 · 0 评论 -
react-native : iTerm/Terminal 终端命令转帖记录
1.npm配置镜像、设置代理 2.react-native-vector-icons的集成心得 3.react native中需要rnpm link的组件转载 2018-05-04 23:37:51 · 535 阅读 · 0 评论 -
[React-Native PanResponder拖拽实现]
1.PanResnponder相关Api componentWillMount() { this.panResponder = PanResponder.create({ /***************** 要求成为响应者 *****************/ // 单机手势是否可以成为响应者 on...原创 2018-12-19 14:29:32 · 3598 阅读 · 0 评论 -
[JS ] JS单线程的理解
为什么javascript是单线程?对于js单线程的理解, 可以先看上面的帖子, 我觉得讲的挺好的, 但是理解这东西还是要看个人, 我怕我理解歪了,索性也画一个流程图解,用自己的方式去尝试理解js单线程,也许有错误或则不完善的地方,还请斧正1.js执行的时候,会在一个主线程中顺序执行同步任务,2.遇到异步(耗时)任务,我的理解是任务会被挂起,然后继续执行下一个同步任务,3.被挂起的异步任...原创 2019-03-27 10:12:35 · 437 阅读 · 0 评论 -
RN:遇到一个字符串解构中的坑(安卓Release安装包中才出现)
首先, 字符串可以看做一个 类似数组 的对象,也可以通过解构的方式获取每个字符串const [a,b,c,d,e] ="Hello";console.log(a); //Hconsole.log(b); //econsole.log(c); //lconsole.log(d); //lconsole.log(e); //o出现的问题let numStri...原创 2019-04-28 19:18:35 · 331 阅读 · 0 评论