举世武双的博客

文档地址：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-nativeWebView组件是RN端与Web端交互的一个常用组件。原本WebView组件是放在react-native组件库当中的，现在R...

1 Android端问题概述更新RN版本到0.61.0后，打包命令报错，报错原因往往来源于第三方库，因为第三方库的版本还是比较老旧的版本，它们没有适配新android版本或新的构建工具。当我们使用新的构建版本去构建APP时，就会发生很多错误。2 构建APP的问题种类2.1 gradle配置不正确可用init命名初始化一个新RN版本的项目，参考里边的gradle配置，然后更改自...

2019-12-041、RN升级到0.61.0版本，项目依赖的第三方库可能也要随之升级，因为Android版本更新后，旧版本的第三库使用的可能是老旧的API，与新版本不兼容，因此需要升级。2、新版react-native移除了部分老旧的组件，部分API也会随之更新。旧版本的react-native若使用这些组件或者API就会报错。3、第三方库有兼容性问题或者报错，可以到对应...

功能层面1、页面导航react-native-navigation：https://reactnavigation.org/docs/en/3.x/getting-started.html2、状态管理mobx, mobx-react：https://cn.mobx.js.org/refguide/api.html3、持久存储react-native-sto...

2019-04-06下面是常用的RN命令。1、初始化RN项目，并指定RN版本react-native init [项目名称] --version RN版本2、安装项目依赖npm installyarn install3、强制重新安装项目依赖yarn install --force4、启动JS Serveryarn start...

封装IOS原生组件的步骤1、首先创建自定义的IOS原生组件类（如果是IOS已有组件则无需创建），然后再创建一个RCTViewManager的子类（RN组件桥接类）。2、添加RCT_EXPORT_MODULE()宏标记。3、实现-(UIView *)view方法，返回IOS原生组件的实例对象。1、创建自定义的IOS原生组件类，再创建RN组件桥接类（1）自定义的IOS原...

导出IOS原生的组件属性给RN端使用，主要有以下几个步骤。1、RN组件桥接类导出属性宏定义代码如下：TestReactNativeViewManager.m//// TestReactNativeViewManager.m// NativeCommunicationDemo//// Created by chenlw on 2019/4/10.// ...

导出IOS原生组件的事件到RN端的步骤。1、在IOS组件的头文件声明一个事件属性。2、在RN组件桥接类里面导出这个事件属性。3、在IOS原生端通过定义的事件属性发送事件到RN端。4、在RN端封装IOS原生组件事件。1、在IOS组件的头文件声明一个事件属性TestReactNativeView.h//// TestReactNativeView.h// ...

参考资料：https://blog.youkuaiyun.com/sinat_17775997/article/details/70473988https://www.jianshu.com/p/8f2232da0956http://www.cocoachina.com/ios/20161026/17855.html本文主要介绍react-native应用如何处理APP被外部URL...

一、前言接触react-navigation已有半年，从使用体验来说，它的效果是非常棒的，API的学习和使用也比较简单易用，所以react-native社区主推的导航库就是react-navigation。使用react-navigation可以快速搭建APP的页面导航架构，而且它的配置灵活，页面导航效果可以达到原生端的体验。二、页面导航架构搭建一般APP都会有这么几个页面，启动页、注...

2019-04-03使用WebView组件可以显示一个HTML网页，这里记录一下react-native如何跟HTML页面进行通信，即实现双向的事件调用和数据传递。一、React-Native调用HTML页面事件1、在HTML页面添加对RN事件的监听，。window.onload = function(){ addReactNativeListener();...

最近在要把IOS原生端的百度人脸离线采集SDK移植到React-Native上，就学习了IOS原生平台与RN之间的通信机制。做了一个Demo，现在把知识点梳理了一下，主要有以下两个：（1）RN调用IOS原生平台的方法，并传递参数。（2）IOS原生平台向RN发送事件，并传递参数。Demo主要业务流程如下：（1）RN端跳转到IOS原生页面（我们假设这个是人脸识别页面）。这一步就是实现R...

Rect Naviagtion-SwitchNavigator一、用途官方文档介绍switchNavigator的用途是：SwitchNavigator 的用途是一次只显示一个页面。 默认情况下，它不处理返回操作，并在你切换时将路由重置为默认状态。举个例子，我们进入APP时会有一个广告页，过了几秒后可以跳转到主页面，如果你在主界面点击返回键，就会退出APP而不是返回到广告页面。从广告页...

一、BUG记录在项目当中引入react-navition（2.13.0），运行的时候出现了以下错误：TypeError: undefined is not an object (evaluating 'context.changedBits')This error is located at:    in SceneView (at SwitchView.js:12)    i...

一、基本概念Mobx是什么？Mobx是一个第三方开源的状态管理的函数响应式编程库，它提供机制来存储和更新应用状态供 React 使用。React Native的组件要渲染一些数据，这些数据通常会存储在React组件的state里面，Mobx就是专门管理state的，当存储在state里面的数据发送改变时，Mobx可以让组件重新渲染改变后的数据。也就是说，组件的state数据发生后，页面会实...

icon_selected color：#d81e06icon_unselected color：#515151一、前言这段时间在公司开始搞React Native开发，要对APP的主页底部导航栏进行替换，寻找了多种方法，最后使用react-native-scrollable-tab-view库的ScrollableTabView实现了想要的功能（控制Tab页面的显示和隐藏、带消息圆点...

2019-01-20加载层组件效果如图：   react-native-popup-dialog是一个很不错的对话框库，我借用它的遮盖层实现了加载层效果。地址：https://github.com/jacklam718/react-native-popup-dialog/blob/master/README.md使用demo代码:import React ...

2019-02-11 1、npm、yarn基本命令。React Native调试的基本命令。2、Flexbox布局（弹性盒子布局）：页面组件的布局。3、props（属性）的运用。4、state（状态）的运用。5、组件style样式的运用。6、组件生命周期。7、基本RN组件的运用。...

2019-02-22 1、在一个onScrollBeginDrag回调方法（ScrollView开始拖动开始时触发）中记录event.nativeEvent.contentOffset.y：Y轴滚动的偏移量。 2、在onScroll滚动事件回调方法中判断当前contentOffset.y与记录的Y轴滚动的偏移量：（1）若记录的Y轴滚动的偏移量 < 当前contentOff...

一、用途官方文档介绍StackNavigator的用途是：为你的应用程序提供一种在每个新屏幕放置在堆栈顶部的屏幕之间转换的方法。举个例子：你在头条浏览一个新闻列表，这个新闻列表页面可以认为是一个StackNavigator，当你点击某一条新闻进入详情页面时，这个详情页面也是一个StackNavigator。这时，你可以在详情页面执行返回操作返回到新闻列表页面。二、使用API和配置R...