wayne214的博客

读者可通过本篇文章深入了解，在现有原生项目基础上，集成RN功能步骤及注意事项，推荐各位阅读。

建议将脚本集成到 CI/CD 流程（如 Jenkins/GitHub Actions）实现自动化发布。全流程自动化，适合集成到 Jenkins/GitLab CI 流水线。建议结合 Fir.im 的 Webhooks 功能（网页）实现钉钉/Slack 通知，进一步完善交付链路。读者可以通过这篇文章了解详细的Android 与 React Native 混合工程的打包步骤及自动化脚本实现。捕获关键步骤（如依赖安装、Bundle 生成）的失败并终止脚本，避免无效构建。中的版本，避免因依赖升级导致构建失败。

React Native 0.76 版本是一个重要的更新，它默认启用了新架构，引入了 React Native DevTools，并带来了多项性能改进和新功能。这个版本标志着 React Native 六年来的发展成果，并且得到了开发者社区的大力支持。新架构的启用意味着开发者可以更高效地构建高质量的原生应用。此外，React Native DevTools 的引入提供了一个更可靠、熟悉且集成的调试体验。性能改进包括 Metro 分辨率的提升和新的样式属性，如boxShadow和filter。

总之，React Native 0.75在布局、架构稳定性、框架使用等方面进行了改进和优化，并对一些功能进行了调整和删除.原文链接。

到目前为止，当你在应用中启用新架构时，桥接器仍然可用，以支持与旧组件和模块的向后兼容性。如果您之前修改过项目中的 Java 文件，并且需要支持将它们迁移到 Kotlin，可以使用 Android Studio 的“代码 > 将 Java 文件转换为 Kotlin 文件”实用程序（也可通过快捷键。自 React Native 0.68 发布以来，我们为用户提供了新的渲染器 (Fabric) 和新的原生模块系统 (TurboModules) 进行试用和评估。和其他新架构一样，无桥模式最初是实验性的。

现在是全面屏的时代，Android手机现在也是各种全面屏,“刘海屏”，“弹出摄像头”,“水滴屏”，“挖孔屏”,伴随着科技的飞速发展，各种提高屏占比的方案也是层出不穷，有点“百花齐放百家争鸣”的感觉，哈哈。但是对于开发者来说，Android的屏幕适配就是一个富有挑战性的工作了。为了呈现更好的视觉效果，许多安卓OEM厂商都开始采用超大屏幕。三星刚刚发布了自己的新旗舰Samsung Galaxy S8...

工作中会遇到各种各样的问题，ReactNative开发也是填坑不止。比如最近在开发需求中，就遇到一个问题。在一个卡片类型的右上角添加一个删除按钮。使用了绝对布局position:'absolute’属性，在Android上却无法正常显示，很是烦恼。有一个相关的issue:https://github.com/facebook/react-native/issues/27255正常希望的展示效...

最近在开发项目的需求中，测试同学提了一个bug,在如下页面中，有三个输入框，在iOS手机上，输入完之后，无法隐藏键盘；安卓手机上，键盘都有收起按钮，所以没有这个问题。想到的解决方案：1、让输入框失去焦点，2、点击背景空白位置，监听键盘Keyboard事件，调用dismiss()方法隐藏软键盘。以上两个方案，都需要写一堆代码，忽然想到之前有类似的页面需求，重新review了一下代码，发现只...

1.x和2.x版本yarn add react-navigation# or with npm# npm install --save react-navigation3.x版本yarn add react-navigation# or with npm# npm install react-navigationyarn add react-native-gesture-hand...

原文链接：https://facebook.github.io/react-native/blog/2019/09/18/version-0.61快速刷新在React Native的社区中关于最常见的痛点问题中，有一个最多的回答是“hot reloading”-热加载功能不能用了。在我们编写函数组件的时候不能正常工作，经常无法无法更新屏幕，也不能对拼写错误和错误做出正确的反映。因为这个功能不可...

接触RN开发也快两年的时间了，期间也开发了5、6个APP了，ReactNative的版本也在快速的迭代着，今天重新出发，从源码解析一下App的启动流程，此次解析基于RN 0.60.5版本。开始之前开始分析之前，新建一个名为RnDemo的空项目,RN版本选择0.60.5，通过查看项目的目录结构中Android部分会自动为我们生成MainActivity.java和MainApplication....

笔者在之前这篇文章中ReactNative集成百度语音合成介绍了在项目中如何集成百度语音合成步骤和部分代码。今天重(you)磅(dian)推(peng)出(zhang)百度语音合成开源库# react-native-baidu-vtts ,目前只做了Android端的集成，后期补上IOS端集成，开源不易，欢迎大家starGithub地址：react-native-baidu-vtts开源的初...

开源一个跨端的卡片式设计(Cards)的组件,在Android中是Material Design中有一种很个性的设计概念，在使用React-Native跨平台的开发框架中，卡片样式在IOS平台通过设置View的样式就可以实现类似的效果,比如这样：基于此，此开源组件，在IOS端即采用了RN平台提供的阴影样式属性来实现卡片样式；在Android端采用Android原生support库在V7引入的原生...

接触RN差不多2年了，发布一个仿支付宝付款密码的输入框控件，一直都是在使用大神们发布的控件，收益良多，现在发布第一个控件，也是基于一位大神写的控件，站在巨人肩膀上，在此感谢，文中有大神封装的链接，大家可以看看，学习npm发布的步骤，也增加了自己学习的自信心和动力。以后工作中会逐渐发布一些自己写的库，还忘朋友们多多支持。项目地址：https://github.com/wayne214/react-...

笔者在工作开发任务中，最近在进行Android打release包测试时，遇到了如下报错，鼓捣了好久(甚是郁闷)，终于解决了。ReactNative版本环境如下问题描述直接使用react-native run-android运行debug没有问题在没有添加react-native-spinkit这个第三方库是打包也正常添加react-native-spinkit第三库，进行run-an...

在react-native项目中难免会遇到到图表类的需求，这时一个好的第三方会让我们事半功倍，大神开源了一个# react-native-echarts可以直接调用百度的ECharts组件，非常不错。但是在使用过程中遇到一些问题。1.修改index文件修改 native-echarts 下 src 下 components 下 Echarts 下的 index.js,使用如下的文件进行替换原...

今天简单说一下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第二步，在需要的页面...

最近在使用ReactNative技术搭建新项目的过程中，在集成神策分析时，在进行IOS端配置的时候Xcode进行build项目的时候遇到如下报错：library not found for -lRNSensorsAnalyticsModule,忘记截图了，用如下这张代替一下甚是烦恼，不知道是咋回事。。。最后找到了原因，是因为在如下libararies中无意添加了一个无效的libRNSenso...

原文地址：https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#0580本文由简书作者凌宇之蓝翻译,因本人水平有限，难免翻译有误，还望各位见谅。##[0.58.0]欢迎阅读2019年1月发布的React Native。此版本有许多重大变化，我们特别提请您注意：核心组...

项目中难免会用到第三方登录和分享，本项目中微信登录使用的第三方组件：# react-native-wechat使用yarn add react-native-wechatreact-native link react-native-wechat在包名下新建wxapi文件夹，文件夹下新建文件WXEntryActivity.javapackage com.xxx.wxapi;impor...

使用组件：react-native-baidu-map获取百度地图API_KEY地址：http://lbsyun.baidu.com，在控制台成功创建应用后，就可以看到应用的api key了安装yarn add react-native-baidu-map原生部分Android配置react-native link react-native-baidu-map配置Andro...

在react-native中我们可以通过setNativeProps直接改动组件并出发局部刷新，不用使用props或state.对此，官方的说明以及使用场景：源码中对Image中的组件属性描述：node_modules/react-native/Libraries/Image/Image.android.jsnode_modules/react-native/Libraries/Ima...

最近在开发APP功能的时候遇到一个问题，之前也没有遇到这样的需求所以也没有研究过。功能是这样的：项目中有个webview 加载h5页面，h5页面中有视频播放，IOS端可以点开直接播放，并且有预览画面，而安卓端却没有这个预览画面，且不能直接播放。一开始怀疑是Android的版本问题，一顿查阅发现并没有什么软用。最后还是在reactnative中文网重新仔细的查看了关于Webview的API，才找...

开发中，我们总会遇到各种各样的问题，比如说在手机中显示币种符号"￥"，在iOS手机中显示正常，什么事情也没有，但是在安卓手机中，部分手机显示就很诡异，比如华为手机。究其原因，就是不同Android系统手机自带的系统文字不一样导致的。解决方案：1.其实可以不管他，因为这是Android系统导致的，需要和产品团队沟通2.使用字符“¥”替换接口数据中的人民币支付，就是这么简单粗暴，????data...

1、需求工作可能有这样的需求，就是手机浏览器中加载一个h5页面，点击可以打开某一个APP，比如微信等。这时候通常都是采用URL Scheme的方式进行配置跳转。那么什么是URL Scheme呢？简单说：它是一个页面跳转协议。2、 URL Scheme协议URL Scheme是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面；通...

大家好，十一假期biu的一下就过去了，相信大家都没有玩的尽兴，没关系，我们还有周六周日双休日(不加班)，或者再坚持三个月就到了2020年的元旦了， 是不是发现时间过得太快了。好了，开工了，????。笔者在ReactNative之Image在Android设置圆角图片变形问题这篇文章中提到了安卓端设置图片圆角的解决办法，但是还需要大家复制代码，不太友好(太麻烦，能不能npm一下，????)。鉴于这种情况，...

首先附上官网正文????：React HooksHooks are a new addition in React 16.8. They let you use state and other React features without writing a class.简单讲就是说，Hooks是在React 16.8版本中新增加的特性。可以让你通过不谢一个类class,就可以使用State和其...

笔者最近在进行项目打包的时候，遇到了这个如下的报错：这个应该还是和aapt有关系，那么解决方法也就有了：通过设置Android文件夹下面的gradle.properties文件中的：android.enableAapt2=false就OK了。 特此记录一下...

在Mac上开发Android平台的应用的时候，难免遇到需要配置NDK环境，现将配置步骤做一下总结：##1. download NDK for mac,如果打不开，可以多尝试下面几个网址    http://developer.android.com/tools/sdk/ndk/index.htmlhttp://www.androiddevtools....

Reactnative的版本升级一直是一个工作量比较的大的事情，每次升级都可能伴随着很多的坑。前段时间在升级到0.56版本的时候发现一个问题，在flatlist使用中，加载多页后，列表项内容开始进行上下抖动的乱跳，疯了一样。于是开始上react-native的issues上寻找答案，有通过查看官方的版本升级日志找到了答案：react-native升级日志0.57在其中看到如下bugFix描述...

目前react-native平台最好用的轮播图组件：react-native-swiper最近在项目迭代开发测试中发现一个问题，就是在快速切换APP底部tab导航栏时，集成的轮播图组件react-native-swiper会白屏，无法显示图片如下图所示：通过查找react-native-swiper的issues发现了，也有人遇到这个问题，最终找到了解决方案：给组件Swiper添加一个属...

ReactNative中的Image使用时比较简单的，比如下面这样：<Image resizeMode='contain' defaultSource={require('images/avatar_placeholder.png')} source={{ uri: 'http...

从17年3月份开始接触ReactNative的开发到现在已经差不多一年半的时间了，在这一年多的时间里，完成从零到壹的过程，也使用ReactNative完成了6、7个APP的开发工作。期间踩了无数的坑，现在打算从零开始写一下怎么入门ReactNative开发。关于ReactNativeReact Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Fac...

这两天同事在写项目的过程中，启动Android端进行编译报了如上的错误，从报错中可以知道，是因为第三方库react-native-device-info引起的，从其源码中可以看到：它的安卓部分依赖了google的服务，为啥要依赖这个服务呢？不是特别清楚。既然罪魁祸首是这个库，就去github上看看她的issues吧。https://github.com/rebeccahughes/reac...

最近在写项目的时候，在调试代码的过程中，偶尔会报如下错误，想必好多同学都遇到了，现在记录一下，和大家分享。error: bundling failed: Error: While resolving module `react-native-vector-icons/dist/EvilIcons`, the Haste package `react-native-vector-icons` wa...

1.最近测试人员在测试软件的时候发现红米手机安装上APP后一点击就闪退了，在bug问题里面标注了优先级为紧急，严重问题为致命， 简直吓屎我了，遂开始研究到底咋回事，https://www.jianshu.com/p/ddbe8c637fc5简单讲就是在网络请求中，比如header中包含了中文字符，okhttp3.Headers$Builder.checkNameAndValue进到这个方法里面...

笔者最近在进行公司项目的迭代开发遇到一个问题，就是，在Android端设置了view的宽高，并设置了view的style属性overflow：hidden，发现内部的view会有溢出，这个属性没有起作用；未修复前的效果如下：会有一点溢出reactnative Github官网相关问题:https://github.com/facebook/react-native/pull/20603查看...

众所周知，React-Native原生的Webview的属性onShouldStartLoadWithRequest仅支持IOS平台，但是往往在开发中两端都需要进行URl的拦截，进行对应的业务需要。通过不断学习，在https://github.com/react-native-community/react-native-webview的基础上，整理出来一个方案，并且发布到了npm上，小伙伴们...

Yarn简介：Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码， 或者分享自己的代码。Yarn 做这些快捷、安全、可靠，所以你不用担心什么。通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。 使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步。代码通过 包（package） (或者称为 模块（...