
我的React Native进阶之路
文章平均质量分 78
从去年11月学习和使用React Native,现在想好好总结一下自己的进阶之路,分享一些学习到的开发技能,希望大家不吝赐教。
举世武双
Do what I love, love what I do, and that take advantage of it.
展开
-
React-Native,iOS跳过HTTPS的SSL证书认证(自签或者无认证)
React-Native,iOS跳过HTTPS的SSL证书认证(自签或者无认证)iOS的解决办法:RN依赖模块:React-RCTNetwork文件:RCTHTTPRequestHandler.mm在RCTHTTPRequestHandler.mm找到这句话#pragma mark - NSURLSession delegate在这句话之后加入后面的方法:// 解决IOS无法访问不受信任HTTPS服务器的问题 satrt- (void)URLSession:(NSURLSession *)se原创 2020-09-14 21:01:40 · 1699 阅读 · 0 评论 -
React-Native,Android端-WebView组件访问Https不受信任站点的设置
React-Native,Android端-WebView组件访问Https不受信任站点的设置react-native-webview库,1、找到Android端源码:包名:com.reactnativecommunity.webview类:RNCWebViewManager.java2、找到内部静态类RNCWebViewClient。RNCWebViewClient是RN端使用的组件类。在这个类当中添加如下代码: @Override public void onReceivedSsl原创 2020-09-13 11:39:40 · 1534 阅读 · 0 评论 -
React-Native,Android端解决无法访问不受信任HTTPS证书服务器的问题
React-Native,Android端解决无法访问不受信任HTTPS证书服务器的问题2020-08-31参考资料:https://blog.youkuaiyun.com/vv_bug/article/details/77100113?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relev原创 2020-09-01 08:50:31 · 3451 阅读 · 1 评论 -
React-native使用Webview内嵌H5页面混合开发
需求背景在移动端开发中,有的业务页面使用原生平台开发十分繁琐,而使用H5页面来实现则十分便捷和高效,这就是APP+H5混合开发。在众多APP当中也能看到H5混合开发的页面。这个需求是十分常见的。交互机制react-native可以使用Webview组件来内嵌H5页面,在开发过程中,H5页面常常要和APP端进行数据交互。那么这个交互机制是怎么样的呢?原理如下:- APP端注入JS脚本到H5端,供H5页面调用。- H5页面调用APP注入的JS脚本的方法,传递事件和数据到A..原创 2020-05-10 22:38:25 · 4752 阅读 · 0 评论 -
React-native实现联系人列表分组组件(支持拼音搜索)
React-native实现联系人列表分组组件(支持拼音搜索)参考资料:React Native使用SectionList打造城市选择列表,包含分组的跳转:https://blog.youkuaiyun.com/sinat_17775997/article/details/71424324?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-5&depth_1-utm_source=distribute.pc_relevant.no原创 2020-05-08 22:28:21 · 2113 阅读 · 0 评论 -
封装IOS原生组件——导出到RN端使用
封装IOS原生组件的步骤1、首先创建自定义的IOS原生组件类(如果是IOS已有组件则无需创建),然后再创建一个RCTViewManager的子类(RN组件桥接类)。2、添加RCT_EXPORT_MODULE()宏标记。3、实现-(UIView *)view方法,返回IOS原生组件的实例对象。1、创建自定义的IOS原生组件类,再创建RN组件桥接类(1)自定义的IOS原...原创 2019-04-11 09:29:47 · 1141 阅读 · 1 评论 -
React-Native常用命令
2019-04-06下面是常用的RN命令。1、初始化RN项目,并指定RN版本react-native init [项目名称] --version RN版本2、安装项目依赖npm installyarn install3、强制重新安装项目依赖yarn install --force4、启动JS Serveryarn start...原创 2019-04-06 13:35:09 · 606 阅读 · 0 评论 -
WebView组件与HTML页面通信机制(React-Native)
2019-04-03使用WebView组件可以显示一个HTML网页,这里记录一下react-native如何跟HTML页面进行通信,即实现双向的事件调用和数据传递。一、React-Native调用HTML页面事件1、在HTML页面添加对RN事件的监听,。window.onload = function(){ addReactNativeListener();...原创 2019-04-04 11:11:30 · 1439 阅读 · 0 评论 -
实现IOS原生平台与RN双向的事件调用和数据传递
最近在要把IOS原生端的百度人脸离线采集SDK移植到React-Native上,就学习了IOS原生平台与RN之间的通信机制。做了一个Demo,现在把知识点梳理了一下,主要有以下两个:(1)RN调用IOS原生平台的方法,并传递参数。(2)IOS原生平台向RN发送事件,并传递参数。Demo主要业务流程如下:(1)RN端跳转到IOS原生页面(我们假设这个是人脸识别页面)。这一步就是实现R...原创 2019-03-21 15:37:11 · 1575 阅读 · 0 评论 -
React Native之ScrollView判断滚动方向
2019-02-22 1、在一个onScrollBeginDrag回调方法(ScrollView开始拖动开始时触发)中记录event.nativeEvent.contentOffset.y:Y轴滚动的偏移量。 2、在onScroll滚动事件回调方法中判断当前contentOffset.y与记录的Y轴滚动的偏移量:(1)若记录的Y轴滚动的偏移量 < 当前contentOff...原创 2019-02-22 11:20:52 · 5596 阅读 · 0 评论 -
react-native-popup-dialog实现通用加载层
2019-01-20加载层组件效果如图: react-native-popup-dialog是一个很不错的对话框库,我借用它的遮盖层实现了加载层效果。地址:https://github.com/jacklam718/react-native-popup-dialog/blob/master/README.md使用demo代码:import React ...原创 2019-01-20 10:35:00 · 1248 阅读 · 0 评论 -
React Native—使用ScrollableTabView实现APP底部导航栏(带消息圆点)
icon_selected color:#d81e06icon_unselected color:#515151一、前言这段时间在公司开始搞React Native开发,要对APP的主页底部导航栏进行替换,寻找了多种方法,最后使用react-native-scrollable-tab-view库的ScrollableTabView实现了想要的功能(控制Tab页面的显示和隐藏、带消息圆点...原创 2018-11-10 11:05:30 · 1188 阅读 · 0 评论 -
Mobx学习
一、基本概念Mobx是什么?Mobx是一个第三方开源的状态管理的函数响应式编程库,它提供机制来存储和更新应用状态供 React 使用。React Native的组件要渲染一些数据,这些数据通常会存储在React组件的state里面,Mobx就是专门管理state的,当存储在state里面的数据发送改变时,Mobx可以让组件重新渲染改变后的数据。也就是说,组件的state数据发生后,页面会实...原创 2018-11-04 16:24:39 · 866 阅读 · 0 评论 -
react-navigation踩坑记录
一、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...原创 2018-11-02 12:47:22 · 1168 阅读 · 0 评论 -
Rect Naviagtion-SwitchNavigator
Rect Naviagtion-SwitchNavigator一、用途官方文档介绍switchNavigator的用途是:SwitchNavigator 的用途是一次只显示一个页面。 默认情况下,它不处理返回操作,并在你切换时将路由重置为默认状态。举个例子,我们进入APP时会有一个广告页,过了几秒后可以跳转到主页面,如果你在主界面点击返回键,就会退出APP而不是返回到广告页面。从广告页...原创 2018-09-24 10:46:45 · 435 阅读 · 0 评论 -
Rect Naviagtion-StackNavigator
一、用途官方文档介绍StackNavigator的用途是:为你的应用程序提供一种在每个新屏幕放置在堆栈顶部的屏幕之间转换的方法。举个例子:你在头条浏览一个新闻列表,这个新闻列表页面可以认为是一个StackNavigator,当你点击某一条新闻进入详情页面时,这个详情页面也是一个StackNavigator。这时,你可以在详情页面执行返回操作返回到新闻列表页面。二、使用API和配置R...原创 2018-09-09 13:32:55 · 310 阅读 · 0 评论 -
React Native入门路线
2019-02-11 1、npm、yarn基本命令。React Native调试的基本命令。2、Flexbox布局(弹性盒子布局):页面组件的布局。3、props(属性)的运用。4、state(状态)的运用。5、组件style样式的运用。6、组件生命周期。7、基本RN组件的运用。...原创 2019-02-15 15:18:58 · 387 阅读 · 2 评论