wayne214的博客

其次，Android 13（API 级别 33）及更高版本上的通知权限改成了运行时获取，应用的通知默认处于关闭状态，需要单独添加权限，并在应用启动页进行用户提示。项目开发需要RN项目可以设置应用角标，搜索相关资料后发现目前没有第三方库直接支持，所以想到自己通过桥接双端原生进行实现，本着不重复造轮子的思想，将库进行开源。首先已有前辈做了原生对应的库，但是小米、荣耀等机型需要单独适配，采用的方案是添加原生依赖库，并单独对小米，荣耀机型进行适配工作。欢迎👏🏻各位大佬star⭐️。

以上就是0.71版本的主要更新内容，此次重点还是把TypeScript作为首要开发语言。

现在不少应用都是采用了混合开发模式，不论是原生加RN,或是原生加Flutter,或是原生加H5。原生实现主业务线，其他部分可以借助跨平台方案开发，提高开发效率，或者实现热更新，调高业务迭代效率。下面简单介绍一下Android原生集成最新RN版本的过程。

最近项目需要，又重新写了一个hooks版本的，现在直接上源码，对于不想添加依赖库的伙伴，可直接复制源码到项目中，直接使用。之前写过一个纯js的开源组件，使用的类的形式，也比较老了，可直接添加npm库到项目中进行使用。项目中需求如果涉及钱包，支付等功能，可以大概率会用到输入密码组件，也算是个常见组件吧。

业务开发中搜索框和列表的组合页面应该是比较常见的场景，那么有什么坑呢？最近在开发过程就遇到了一个问题，输入搜索关键词查询接口返回数据后，点击列表项并返回上个页面时，发现需要两次点击，纳尼？页面示意图如下1.第一次点击列表项无法触发onPress点击事件2.第一次点击其实是使输入框失去焦点并隐藏键盘知道问题在哪就有解决问题的方向了：点击列表项使输入框自动失去焦点，并触发onPress点击事件。写了Android和Flutter混合开发一年多，又开始写RN了，就想一个圆一样。

作为跨平台开发框架的明星产品React Native迎来了0.70版本的更新，此次更新主要是内容是Hermes作为默认js引擎，针对Godegen的新统一配置，支持Androi端CMake的构建以及有关新架构文档的更新说明。

1.与原生应用开发采用的命令式编程范式相对应，ReactNative使用的是声明式的编程范式， 比如采用JSX编写布局页面2.ReactNative的特点：组件化、单向数据流、原生组件、跨Android/iOS3.框架自有组件的通用样式：4.创建组件状态的方法：useReducer5.二进制图片占用3个字节，编码成为Base64后占用4个字节,因此Base64 图片体积比其他二进制图片体积大1/36.RN中可以增加 Pressable 组件点按事件的触发区域的方式：7.可以实现视图复用的列表组件是Recyc

文章目录亮点重大更新其他更新和修复可选的新架构官方网站的更新亮点重大更新ReactNative升级Node 16, 此更改意味着用户现在需要使用 Node >= 14 的版本Android Gradle插件升级至7.0.1，强制使用JDK 11进行Android build移除了iOS ApiRCTBundleURLProvider中的fallbackResource相关工具类的更新：@react-native-community/cli to 7.0.3Metro to 0.6

React Native 0.64版本发布了，主要更新内容是在iOS开启支持Hermes。文章目录1.iOS支持Hermes引擎。2.默认启用Inline Requires3.使用Chrome查看Hermes4.Hermes支持代理5.支持React 176.总结1.iOS支持Hermes引擎。Hermes是一个为优化运行React Native而开源的JavaScript引擎。它通过降低内存利用率、减少下载大小和减少应用程序可用或“交互时间”（TTI）所需的时间来提高性能。其实Hermes在之前就

项目中用到了自定义的车牌号及键盘

文章目录前言集成1. 自动添加依赖2.手动添加配置1.在android/build.gradle中添加maven地址中添加配置2.android目录下，在app/build.gradle中添加如下配置3.android--> defaultConfig中添加如下配置4.在android/app/AndroidManifest.xml 的标签内添加meta-data5.在MainApplication.java的文件里添加以下信息ReactNative项目中JS调用代码前言最近项目中需要集成消息推送

发现的问题最近公司项目在使用ReactNative集成融云的IM-SDK,使用了一个前辈做的集成库， 在使用中发现了一下问题。首先发送文字消息正常的，但是发送图片消息，本地和远端都无法展示融云返回的图片， 使用的图片选择库是react-native-image-picker。开始项目中使用的是最新版本， 返回的图片地址是图片uri 是以”content“为开头的，使用此图片地址调用融云的发送图片信息接口，发送成功，但是融云返回的的remote图片地址并不能展示图片，甚是苦恼。寻找答案于是到reac

项目中使用了融云的及时通讯解决方案，使用了第三方集成库rongcloud-react-native-imlib， 在debug模式中连接融云接收消息正常， 但是生成release包， 安装apk到手机上发现无法获取融云的历史消息，也就是没有连接成功，也是郁闷至极。通过查阅资料，找到了解决方案， 在项目的Android目录中，找到app文件夹下的build.gradle文件，修改为如下：android { ... buildTypes { release {

最近入职了新公司，进行新项目的开发工作， 公司的测试环境使用的http网络，打包apk,安装到手机上发现无法访问网络。特此进行记录一下，也供同行朋友们参考。解决方法：打开项目的Android目录下，在app/src/main路径下找到AndroidManifest.xml文件，在application节点下添加 android:usesCleartextTraffic=“true”有图有真相...

文章目录前言JSX的定义JSX编译工具-BabelJSX描述小结为什么React使用JSXJSX是如何映射为虚拟DOM的如何渲染到DOMrender()总结前言众所周知React Native开发中，页面View书写布局采用了React 的JSX语法，而在ReactNative面试中可能会遇到有关JSX相关的面试题，今天和大家分享有关JSX的知识，为你的面试助一臂之力。JSX的定义JSX到底是什么？我们先看看React官网的定义。JSX is a syntax extension to Java

本文将介绍如何在使用React Hook进行网络请求及注意事项。文章目录前言使用useState创建js页面使用useEffect请求数据你会遇到的问题手动触发hook请求添加一个加载框网络请求错误的处理CommonFetchApi使用useReducer进行网络请求页面销毁时中断网络请求总结前言Hook是在React 16.8.0版本中新加入的特性，同时在React-Native的0.59.0版本及以上进行了支持，使用hook可以不用class的方式的方式使用state，及类似的生命周期特性。本片

今天调试demo遇到一个问题，使用react-native run-ios命令启动app,在加载bundle的时候，本地package 服务报了如下错误：报错···Error: Unable to resolve module ./debugger-ui/debuggerWorker.js from ``:None of these files exist:debugger-ui/debuggerWorker.js(.native|.native.js|.js|.native.json|.jso

文章目录问题解决方法问题今日在执行项目调试，ios使用pod安装第三方依赖的时候，执行pod install报错：[!] Error installing SensorsAnalyticsSDK[!] /usr/bin/git clone https://github.com/sensorsdata/sa-sdk-ios.git /var/folders/80/2n8k46ln2bdf3xk5dkdf_ddm0000gn/T/d20200824-10173-1tsouho --template=

最近项目开发中遇到一个Android的适配问题，同事的红米手机K20pro上项目App中部分页面上的文本显示不全，比如下面这样同事的手机升级到了最新的miui12, 默认的手机字体是小米兰亭pro,正好我这边有个小米8的测试机，前两天也升级到了最新的MIUI12系统，同样的页面在小米8上显示正常。遇到这种问题确实让人头大，怎么办？搞呗。在GitHub上react-native项目中搜索相关问题，下面是就是对相关问题的讨论issues,感兴趣的朋友可以去看看。Github相关问题：issues，发现不

本篇为第二篇整理的文章，第一篇的链接纯干货Android知识点整理(一)文章目录1.OkHttp解析2.Bitmap解析3.Window、Activity、View三者关系4.Handler机制5.APK安装包体积优化1.OkHttp解析首先 OkHttp 内部是一个门户模式，所有的下发工作都是通过一个门户 Dispatcher 来进行分发。然后在网络请求阶段通过责任链模式，链式的调用各个拦截器的 intercept 方法。其中有 2 个比较重要的拦截器：CacheInterceptor 和 Ca

今日打算安装一下ReactNative官方推荐的脚手架工具Ignite。文章目录node版本升级1.查看可以安装的node版本2.选择一个版本进行安装3.查看已安装的版本遇到报错查找问题所在解决问题node版本升级1.查看可以安装的node版本nvm ls-remote2.选择一个版本进行安装nvm install v12.18.33.查看已安装的版本nvm ls遇到报错担心会影响原有项目，所以编译启动了当前项目，编译build success,完美，but，APP启动直接就把

在使用 React Native 时，我们用到两个不同的js引擎JS引擎在iOS、Android的模拟器或是真机上，React Native使用的是JavaScriptCore，也就是Safari所使用的JavaScript引擎。但是在iOS上JavaScriptCore并没有使用即时编译技术（JIT），因为在iOS中应用无权拥有可写可执行的内存页（因而无法动态生成代码）。在使用Chrome调试时，所有的JavaScript代码都运行在Chrome中，并且通过WebSocket与原生代码通信。此时的

今天ReactNative官网发布了0.63版本，距离上一个版本0.62已经过了差不多将近4个月的时间了，我在上一篇文章中也提到了0.62的更新内容一篇文章带你了解ReactNative0.62更新内容。此次0.63版本的更新主要是提供了一个LogBox(日志盒子)，一个全新设计的日志系统，方便开发定位开发中遇到的问题，请大家通过本篇文章来了解一下吧。文章目录LogBoxPressable原生平台Color(PlatformColor, DynamicColorIOS)不再支持iOS9及Node.js

最近公司项目要求进行定时上传位置信息，及埋点，因为使用的是RN开发，一开始就是想到在Android和Ios原生里进行操作。在原生里面实现了定时任务，Android里面使用的是broadcastReceive + service + timer实现了。现在需要生成一个日志文件，一开始想在原生里面进行实现文件的读写。后来查找相关资料，发现了一个不错的第三方插件，react-native-fs，现在记录一下，集成步骤及简单的文件读写操作。插件地址：https://github.com/itinance/re

https://reactnative.cn/docs/upgrading通过官网提供的Upgrade Helper工具来帮助我们更好的完成升级工作。debug遇到的问题：Unable to resolve module ./debugger-ui/debuggerWorker.js from解决方案：watchman watch-del-allreact-native start --reset-cache...

此文章为ReactNavigation导航库5.0版本的第4篇，前几篇系列文章如下：文章目录创建需要的页面创建三个对应的导航器实例创建底部导航路由，采用系列二文章代码堆栈(Stack)与Tab嵌套Stack Navigator, Tab Navigator与Drawer Navigator综合嵌套传递参数嵌套导航的最佳实践其他问题创建需要的页面···// 设置页面const Settin...

首先祝大家五四青年节及五一假期快乐。在前面系列文章中我们了解5.0最新版本堆栈导航和选项卡导航的用法，今天我们来看看抽屉导航的使用方法。文章目录安装使用实现效果Drawer Navigator属性介绍集成出现的问题安装yarn add @react-navigation/drawer使用1.导入对应的组件import { createDrawerNavigator } from '...

在今年的3月26日，FaceBook正式发布了ReactNative最新版本，版本号为0.62。作为一款优秀的开源跨平台开发框架，和对手Google开发的Flutter相比，近一年来的发展可谓进步缓慢，至今尚未发布1.0的正式版本。今天我们来聊一聊最新版本的更新内容。调试工具Flipper本次更新默认支持了Facebook自己研发的跨平台调试工具Flipper,这是一个桌面的应用程序。具体...

本篇是React Navigation 5.0系列的第二篇文章，了解一下APP开发中常见的底部导航菜单的使用，即本文的主角:TabNavigation。本篇文章在React Navigation5.0系列一：StackNavigator的使用此篇文章的基础进行延伸，通过一系列文章构建完整的APP导航框架。安装使用底部导航菜单第一步要先通过如下命令行安装依赖：yarn add @react-n...

前段时间项目时间紧张，ios端因为pod文件冲突，没有使用ios模拟器开发，今天见打算搞一下这个问题。解决过程主要是如下两个步骤：首先删除项目ios目录下的Pods文件夹，然后进入项目的ios 文件，执行命令pod install,等待pod文件安装完成，重新运行模拟器即可。以为这样就完了？我真是Too Young Too Simple。在ReactNative项目根目录运行命令react...

最近已经开始远程办公模式，今天打开公司的ReactNative项目，按照平时的工作习惯，首要要启动苹果的模拟器，使用如下命令react-native run-ios发现报了一个错误：Could not find iPhone X simulator，具体报错截图如下，提示找不到iphone x的模拟器。有些郁闷，因为在之前公司办公电脑上运行项目，启动模拟器一切正常，没有出现此问题。查阅...

想必读者朋友们在官宣：ReactNative导航库重大更新这篇文章中了解到了，React Native官方推荐的路由导航库React Navigation更新到了第5版，也了解到了具体的提升和变化的地方，感兴趣的朋友可以仔细阅读这篇文章来了解一下新版和之前版本的差异。新版本的React Navigation相比较之前的版本，无论是安装或者项目中集成的方法和步骤，都发生了很大的变化，接下来跟着这篇...

2020年2月6日React Navigation通过其博客正式宣布了React Navigation第5个版本，即React Navigation 5.0，其称之为一种新的导航方式。官网博客地址：React Navigation 5.0 - A new way to navigate今天通过本篇文章来一起看一下和之前版本有何不同。文章目录基于配置的组件加入Hooks通过组件更新设置全新的主题...

开源：ReactNative集成百度语音开源库，在这篇文章中作者开源了一个ReactNative集成百度语音合成的组件库，今天通过查看Github上的关于开源react-native-baidu-vtts 的issues，有朋友提到了一个bug,并给出了具体报错请问「java.lang.String com.wayne.baiduvoice.util.OfflineResource.getTex...

最近原来的老项目有点问题需要处理一下，运行启动命令，就报了如下错误，提示找不到iPhone 6 模拟器。react-native run-iosOwaiss-Mac:pdm owaisahmed$ react-native run-iosFound Xcode project pdm.xcodeprojCould not find iPhone 6 simulatorError: ...

工作中，我们在开发的迭代任务中，会优先完成开发的业务需求，保证产品的各项功能模块稳定正常的上线和迭代。一般情况下，我们通常是根据UI同学的效果图来绘制我们APP的功能UI展示图。比如下面的这个效果图，这是一个卡片上的按钮，点击按钮会将竖向的整条数据进行删除操作。我们正常按照这个效果图，并用代码进行布局UI实现，完成功能开发，没有问题，但是却有一个用户体验的问题。对于提升用户体验，在RN的...

工作中的惊喜不断，今天遇到一个问题，一个客户的手机升级为最新的Android 10系统后，原来的我们项目的APP一点击Icon启动APP就闪退，根本不能用。一开始怀疑是App版本兼容问题,查看项目app/build.gradle文件中配置如下：android { compileSdkVersion 27 buildToolsVersion "27.0.3" defau...

今天简单说一下react-native平台上比较好用的表格组件的使用方法：组件地址：react-native-table-component第一步，添加依赖yarn add react-native-table-component第二步，在需要的功能页面导入组件import {Row, Rows, Table} from 'react-native-table-component';...

最近在写公司的项目，因产品设计需求，需要类似如下的效果，像是一个时间轴本着不重复造轮子的目标，在最喜欢的github上找寻合适的组件，终于发现了一个非常棒的组件：react-native-step-indicator使用就非常简单了第一步，添加组件依赖,这里墙裂建议大家使用yarn管理项目依赖yarn add react-native-step-indicator第二步，在需要的页面...