-
RN
2018-08-14 13:12:41接收到的事件处理可能导致处理结果中的某些数据需要...这些数据可以成为该RN组件的状态机变量。我们把他们称为状态机变量备选名单。 重复数据: * 该数据可以由备选名单上 的其他数据通过某种规则计算得出; * ...接收到的事件处理可能导致处理结果中的某些数据需要显示在UI界面上。这些数据可以成为该RN组件的状态机变量。我们把他们称为状态机变量备选名单。
重复数据:
* 该数据可以由备选名单上 的其他数据通过某种规则计算得出;
* -
RN8302、RN8302B
2018-08-16 20:31:41RN8302、RN8302B,官方给的芯片使用手册资料,电路原理图,官方提供的源码等。 -
RN模板
2018-02-26 15:58:40RN底部选项卡demo RN底部选项卡demo RN底部选项卡demo RN底部选项卡demo -
RN8302、RN8302B应用笔记
2018-11-21 15:46:19RN8302\RN8302B应用笔记,原厂资源,绝对权威,欢迎大家下载参考 -
单相SOC芯片RN8213_RN8211_RN8211B用户手册_V1.7.pdf
2019-09-12 11:53:35单相SOC芯片RN8213_RN8211_RN8211B用户手册_V1.7 -
三相计量-RN8312+RN830x.zip
2019-11-07 10:19:54三相计量-RN8312+RN830x,三相电表参考原理图源文件、PCB源文件,应用笔记,参考代码,以及手册等,资料很全,包括RN8303B、RN8303、RN7302的参考 -
东芝 rn1905 RN1905PDF
2011-03-10 16:52:27东芝RN1905 东芝RN1905PDF资料 东芝RN1905 东芝RN1905PDF资料 -
RN与android混合开发及RN调用原生方法
2017-04-06 10:56:19RN与android混合开发及RN调用原生方法 -
RN总结
2018-10-26 17:29:34RN总结 iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(1)基本环境 iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(2)集成过程 一个RNDemo(React Native 0.57.3 + ES6)实现...文章目录
- RN总结
- 1. props和state相关的属性传值
- 2. FastList和fetch应用
- 3. 原生与RN互调及传值
- 3.1 RN跳转原生界面
- 3.2 RN跳转原生界面并传值
- 3.3 RN跳转原生界面并传值后,原生界面再回调给RN界面相关信息
- 3.4 原生界面传值给RN页面
- 3.4.1 原生界面向下级RN界面传值
- 3.4.2 原生界面向上级RN界面传值
- 4. 生命周期函数
- 5. {variable}变量嵌入风格
- 6. constructor中函数绑定
- 7. 虚拟DOM和DIFF算法
- 8. Flex和FlexBox布局
- 9. NativeModules与RCTBridgeModule通信机制作用
- 10. Xcode烦人的log输出: nw_connection_get_connected_socket
- 11. Redux
- 12. RN 打包js文件
- 13. 原生与RN都跳转同样的RN子页面
RN总结
iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(1)基本环境
iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(2)集成过程
一个RNDemo(React Native 0.57.3 + ES6)实现(包含RN与原生相互跳转和通信)
1. props和state相关的属性传值
1.1 Props
Props
:大多数组件在创建的时候可以使用各种参数来进行定制,用于定制的的这些参数就是Prop
,在defaultProps
中声明,声明propTypes
可以控制属性类型#例如name属性,就将name属性传递给NewText组件 <NewText name="zhouyu"/>
引用属性
{this.props.name}
总结: 常用与界面间控制器以及父子空间传值,类似于
iOS
的property
属性; 在父组件中指定,在生命周期中不能再改变; 与iOS
的区别就是RN
使用{}来绑定值,而iOS
使用setProperty
来处理属性值特殊属性: this.props.children
用来遍历子组件
说明 属性prop 状态state 能否从父组件获取初始值 YES NO 能否有父组件修改 YES NO 能否在父组件设置默认值 YES YES 能否在组件内修改 NO YES 1.2 State
State
: 一般是数据或者状态存在里面,在constructor
构造方法中完成初始化.大部分组件的工作应该是从props
里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state
.#初始化某些参数 constructor(props){ super(props); this.state={ loaded:false, }; this.fetchData=this.fetchData.bind(this); }
属性参数数据发生变化时
this.setState({ loaded:true, });
总结:
state
的作用就是在一些数据和属性状态发生变化时去更新指定的数据,需要在方法中去调用this.setState
来更新数据.- state的任何属性改变都会导致页面重新绘制,消耗性能.
使用场景: 处理输入事件,网络数据获取,定时更新,消息推送,按钮点击等等
2. FastList和fetch应用
FastList用来替代过时的ListView
Fetch
fetch(myRequest) .then(response => { if (response.status === 200) { return response.json(); } else { throw new Error('Something went wrong on api server!'); } }) .then(response => { console.debug(response); // ... }).catch(error => { console.error(error); });
3. 原生与RN互调及传值
3.1 RN跳转原生界面
iOS端
:- 导入
#import <React/RCTBridgeModule.h>
. - 需要创建一个类遵守
RCTBridgeModule
协议.
3.RCT_EXPORT_MODULE()
写调用的方法.
RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(openNativeVC) { dispatch_async(dispatch_get_main_queue(), ^{ AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate); UINavigationController *rootNav = delegate.navigationController; ZYViewController *nativeVC = [[ZYViewController alloc] init]; [rootNav pushViewController:nativeVC animated:YES]; }); }
RN端
:- 引入
NativeModules
模块. - 创建nativeModule变量.
- RN方法中调用对应的函数
var nativeModule = NativeModules.OpenNativeModule;
//跳转到原生界面 jumpToNative() { nativeModule.openNativeVC() }
3.2 RN跳转原生界面并传值
所传参数可以是已知的数据类型,不过最好用
NSDictionary
和NSArray
来传,其实原理就是RN
那边传递个json
过来,在RN
中json
也是个对象- 原生界面
RCT_EXPORT_METHOD(openNativeVCWithParams:(NSDictionary *)params) { dispatch_async(dispatch_get_main_queue(), ^{ AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate); UINavigationController *rootNav = delegate.navigationController; ZYViewController *nativeVC = [[ZYViewController alloc] init]; nativeVC.params = params; [rootNav pushViewController:nativeVC animated:YES]; }); }
- RN界面
//跳转到原生界面 jumpToNativeWithParams() { var params = {"title": "定位地址: 北京"}; nativeModule.openNativeVCWithParams(params) }
3.3 RN跳转原生界面并传值后,原生界面再回调给RN界面相关信息
- 原生定义block以便回调
- bridge桥接类,添加方法
- 登录页面事件回调
#import "ViewController.h" @interface ZYLoginViewController : UIViewController @property (nonatomic, copy) void(^loginBlock) (NSArray* resultArr); @end
RCT_EXPORT_METHOD(loginState:(NSString *)state callback:(RCTResponseSenderBlock)callback) { dispatch_async(dispatch_get_main_queue(), ^{ AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate); ZYLoginViewController *login = [[ZYLoginViewController alloc] init]; UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:login]; [delegate.navigationController presentViewController:nav animated:YES completion:nil]; //登录成功后,login控制器就可以调用block,进行回调了 login.loginBlock = ^(NSArray *resultArr) { callback(@[[NSNull null], resultArr]); }; }); }
- (void)doLogin { self.loginBlock(@[@"zhouyu", @"123456"]); [self dismiss]; } - (void)dismiss { [self dismissViewControllerAnimated:YES completion:nil]; }
3.4 原生界面传值给RN页面
主要分两种情况: 一种是原生界面向下级RN界面传值; 另一种是原生界面向上级RN界面传值
3.4.1 原生界面向下级RN界面传值
这种情况不能用
NativeEventEmitter
结合iOS的通知来实现传值,因为通知是现有监听者再有发送者,向下级RN界面传值,这种方式有可能下级RN页面还没加载出来,通知就已经发送了,导致下级RN页面获取不到值可以利用加载js的budle文件时,利用initialProperties参数进行传值
NSDictionary *properties = @{@"name": @"zhangsan"}; NSURL *url = [NSURL URLWithString:@"http://localhost:8081/NewIndex.bundle?platform=ios&dev=true"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:url moduleName:@"RNDemo" initialProperties:properties launchOptions:nil]; self.view = rootView;
3.4.2 原生界面向上级RN界面传值
此种情况可以使用RN的
NativeEventEmitter
结合iOS的通知来实现传值- 原生界面创建事件传递的module类,继承RCTEventEmitter,遵守RCTBridgeModule协议
#import <React/RCTBridgeModule.h> #import <React/RCTEventEmitter.h> @interface NativeToRNEventEmitter : RCTEventEmitter <RCTBridgeModule> + (instancetype)shareInstance; @end
- 原生module类实现和重写相关方法
#import "NativeToRNEventEmitter.h" @interface NativeToRNEventEmitter() @property (nonatomic,assign)BOOL hasListeners; @end @implementation NativeToRNEventEmitter + (instancetype)shareInstance { static NativeToRNEventEmitter *instance; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ instance = [[NativeToRNEventEmitter alloc] init]; }); return instance; } RCT_EXPORT_MODULE(); //init方法中使用NSNotificationCenter监听iOS端要发送事件的操作 - (instancetype)init { if (self = [super init]) { [self registerNotifications]; } return self; } //在NSNotification对应的通知方法中将事件发送给RN - (void)registerNotifications { [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(sendCustomEvent:) name:@"CustomEventNameNotifation" object:nil]; } - (void)sendCustomEvent:(NSNotification *)notification { // NSString *eventName = notification.userInfo[@"name"]; if (self.hasListeners) { [self sendEventWithName:@"CustomEventName" body:@{@"name": @"东皇大厦"}]; } } #pragma RCTEventEmitter //重写supportedEvents方法,在这个方法中声明支持的事件名称 - (NSArray<NSString *> *)supportedEvents { return @[@"CustomEventName"]; } // 在添加第一个监听函数时触发 -(void)startObserving { self.hasListeners = YES; } -(void)stopObserving { self.hasListeners = NO; } @end
- RN界面: 导入NativeEventEmitter
var nativeToRNEventModule = NativeModules.NativeToRNEventEmitter; componentDidMount() { var eventEmitter = new NativeEventEmitter(nativeToRNEventModule); this.listener = eventEmitter.addListener("CustomEventName", (result) => { alert("监听到通知事件" + result); this.setState({ add: result.name }); }) } componentWillUnmount() { this.listener && this.listener.remove(); }
4. 生命周期函数
- 默认属性
- 加载阶段
- 运行阶段
- 卸载阶段
# 默认属性 1. defaultProps # 加载阶段 1. constructor: 在组件创建的时候调用一次, 可通过this.state初始化属性 2. componentWillMount: 组件生命周期内,只会执行一次, 在render渲染前执行. 如果在这个函数中通过setState修改变量,RN框架不会额外渲染,子组件也有这个过程,是发生在父组件之后调用,常用语从本地读取数据 3. render: 渲染组件 4. componentDidMount: 组件声明周期中只会执行一次, 如果RN组件的子组件也有componentDidMount函数,并会在父组件的componentDidMount函数之前被调用.一般情况在这个方法中请求网络是一个不错的选择! # 运行阶段 1. componentWillReceiveProps: 在RN组件的初始渲染完成之后,当RN组件接收到新的props时,这个函数将被调用.参数就是新的props.再次强调下,初次渲染不会调用该方法 2. shouldComponentUpdate: RN组件的初始化渲染执行完成后,RN组件接收到新的state或者props时这个函数会调用 3. componentDidUpdate: RN组件初始完成之后,RN框架在重新渲染RN组件完成之后调用,参数是渲染前的props和state # 卸载阶段 componentWillUnMount: RN组件卸载前,这个函数被执行
5. {variable}变量嵌入风格
通过{变量}的方式来绑定数据, this.state.属性或者this.props.属性,来操作属性的get方法, 而{变量}的模式就类似与赋值模式
6. constructor中函数绑定
初始化构造器,ES6中代替getInitialState方法, 在此方法中可以用state更新状态,绑定函数
7. 虚拟DOM和DIFF算法
- 虚拟DOM: 用JS对象的形式,来模拟页面上的DOM嵌套关系
- diff算法: tree diff; component diff; element diff;
tree diff: 新旧两个DOM树逐层对比,找到满足的更新.
component diff: 在进行tree diff时,每一层中,组件级别的对比更新.
element diff: 在进行tree diff和component diff时,每一层中的每个元素的对比更新.
8. Flex和FlexBox布局
Flex: 弹性宽高,决定子控件平分的比例,值越大占的比例就越大.
Flexbox: flexDirection(column,row), justifyContent(延主轴的布局), alignItems(延次轴的布局)
主轴方向 flexDirection: row,column 主轴对其方式 justifyContent: flex-start, flex-end, center, space between, space-around 侧轴对齐方式 alignItems: flex-start, flex-end, center, stretch 超出溢出 flexWrap: nowrap, wrap, wrap-reverse 元素属性: flex-grow, flex-shrink, flex-basis : 默认值 0, 1, auto 宽度 = 父类的弹性宽度 * (flex-grow / sum(flex-grow)) alignSelf: auto, flex-start, flex-end, center, baseline, stretch
9. NativeModules与RCTBridgeModule通信机制作用
NativeModules
: 将原生中对应的类,映射到RN中. 例如原生中有个OpenNativeModule
类和RN通信,在RN中可以使用,var nativeModule = NativeModules.OpenNativeModule;
,将原生中的类导过来,从而实现调用原生方法和属性等操作
RCTBridgeModule
RN中文网: 手动linkingRN官网: 手动linking
Linking提供了一个通用的接口来与传入和传出的 App 链接进行交互。
经查跟PushNotification有关,需要手动完成Linking
‘RCTPushNotification’,
‘RCTLinkingIOS’,Module NativeToRNEventEmitter requires main queue setup since it overrides
init
but doesn’t implementrequiresMainQueueSetup
. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.10. Xcode烦人的log输出: nw_connection_get_connected_socket
[] nw_connection_get_connected_socket [C7] Client called nw_connection_get_connected_socket on unconnected nw_connection [] nw_socket_handle_socket_event [C8.1:1] Socket SO_ERROR [61: Connection refused]
- Xcode menu -> Product -> Run -> Edit Scheme…
- Environment Variables -> Add -> Name: “OS_ACTIVITY_MODE”, Value:“disable”
- Run your app again, done! 这样就没问题了
11. Redux
12. RN 打包js文件
react-native bundle [参数]
Options: -h, --help 输出如何使用的信息 --entry-file <path> RN入口文件的路径, 绝对路径或相对路径 --platform [string] ios 或 andorid --transformer [string] Specify a custom transformer to be used --dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小 --prepack 当通过时, 打包输出将使用Prepack格式化 --bridge-config [string] 使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json --bundle-output <string> 打包后的文件输出目录, 例: /tmp/groups.bundle --bundle-encoding [string] 打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer. --sourcemap-output [string] 生成Source Map,但0.14之后不再自动生成source map,需要手动指定这个参数。例: /tmp/groups.map --assets-dest [string] 打包时图片资源的存储路径 --verbose 显示打包过程 --reset-cache 移除缓存文件 --config [string] 命令行的配置文件路径
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ../RNDemo/Bundle/base.jsbundle
原生引入分为debug和release两种模式
NSURL *url = [[NSURL alloc] init]; #if DEBUG url = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"]; #else url = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"Index.ios.jsbundle" ofType:nil]]; #endif
13. 原生与RN都跳转同样的RN子页面
目前常见的有两种模式: 一种是在index.js内注册不同的组件; 另一种方法是利用关联数组来存储不同的组件,通过传进来的moduleName来取出对应的组件进行加载
导出不同的.jsbundle文件, RN跳RN就不用管了, 原生跳新的RN界面,需要新的js文件去引用
#NewIndex.js import React, { Component } from 'react'; import { AppRegistry, } from 'react-native'; import ShopCenterDetail from "./js/News/ZYHome/ZYHomeShopCenterDetail"; export default class RNDemo extends Component { constructor(props) { super(props); this.state = { selectedTabBarItem: "contacts" }; }; render() { return ( <ShopCenterDetail/> ); } } AppRegistry.registerComponent('RNDemo', () => RNDemo);
react-native bundle --entry-file NewIndex.js --platform ios --dev false --bundle-output ../RNDemo/Bundle/xxx.jsbundle
…未完待续…
-
RN 城市列表
2017-07-21 09:22:39RN 城市列表选择,实现和原生一样的效果 -
Rn学习
2017-11-02 16:36:12随着跨平台语言的流行,rn(react native)也越来越火了,为了顺应潮流,于是我开始了我的rn学习之旅。 一、搭建环境 编译环境和运行环境参考官方文档来搭建即可,开发工具我是采用的是webstrom 二、到现阶段产生的...随着跨平台语言的流行,rn(react native)也越来越火了,为了顺应潮流,于是我开始了我的rn学习之旅。
一、搭建环境
编译环境和运行环境参考官方文档来搭建即可,开发工具我是采用的是webstrom
二、到现阶段产生的坑。
1原生的设置界面我用rn语言来实现了,在此过程中涉及到的坑就是rn与原生交互,在原生模块定义好module,里面包含rn调用原生的方法和原生调用rn中的方法,再packge中进行引用,因为混合开发的app是create出来的,不是init出来的,但是官方推荐的在application中add package是属于init时才采用的,那么现有的情况需要在自己的EntryActivity中进行添加package即可,就不会出现找不到的问题。
2导航栏进行重定向的时候,原生可能多次跳转到原生,那么采用resetAction重新导航来解决跳转两次的问题。
3由于原生和rn交互都是异步的操作,因此在界面渲染的时候,既要考虑到rn的生命周期,以及值的状态,利用state来处理异步显示的问题。
4rn中包含两种context,一种是rn中的context,另外一种是getCurrentActivity(),activity的上下文。
5var是全局的、let是布局的,如果先定义了var a=1;再let a=1;就会报错。这里可以仔细去了解下作用域、var、let的区别和适应范围
6在学习rn中的数据(状态)管理redux时,其中发现欠缺一些js的知识的掌握。
(1)lambda表达式(2)ES6参数默认值语法(3)Object.assign创建副本、pop的使用(改变数组,且返回最后一个数据),Array.prototype.reduce
(4)json.parse():解析成json对象,json.stringify():生成字符串
7下一阶段准备分享网络、正则表达式以及redux的分享
-
RN7213是ARM Cortex-M0内核的电表SOC芯片带LCD驱动 采样速度快,开发例程齐全,有参考方案-RN821x_RN831x_...
2019-09-03 11:14:04RN7213是ARM Cortex-M0内核的电表SOC芯片带LCD驱动 采样速度快,开发例程齐全,有参考方案-RN821x_RN831x_RN721x应用笔记005-在线升级说明v1.0.zip -
RN7302相关文档
2018-05-16 10:37:38RN7302是一款多功能高精度的三相计量专用芯片,适用于三相四线和三相三线应用。本压缩文件中包含:RN7302三相不平衡检测应用笔记、RN7302校表应用笔记、RN7302用户手册以及RN7/8302应用笔记。 -
RN入门-新建rn项目
2017-11-23 11:08:01 -
RN系列:Android原生与RN如何交互通信
2020-05-29 09:01:14【简述RN集成到Android原生项目】【Android项目集成RN系列:RN使用Android原生控件或自定义组件】【React Native Linking与 Android原生页面路由跳转问题】 Android与RN通信.png React Native在Android混编项目... -
RN 简介
2018-03-01 14:32:33RN开发中常见技术方案 React Native开发 JS语法 Promise Aysnc Yield 生命周期 React Native 中 component 生命周期 布局 Flex 布局 基本 导航 react-native-navigation 网路请求 react-... -
RN6752/RN6752M/RN6854M/RN6862M/RN6864M---台湾立敏RICHNEX AHD RX芯片介绍
2019-07-22 17:09:37台湾立敏RICHNEX AHD RX芯片介绍 RICHNEX 公司简介 RICHNEX,台湾立敏电子股份有限公司,隶属于Richtek集团,成立于2008年,是一家无晶圆IC设计公司,主要从事模数混合...RN6752 720P 2CH (BT656/BT601)*1 72... -
RN 基础
2016-11-18 10:08:22React和RN: React是facebook页面组件的抽象和形态的技术方案--Web RN app 编译后的原生应用 JavaScript用在不同的地方 ReactNative 框架,jsc react 跨平台,组件,web的发布能力 提供了原生ui组件,手势识别,... -
RN系列:RN使用Android原生控件或自定义组件
2020-05-29 09:02:03【简述RN集成到Android原生项目】【RN系列:Android原生与RN如何交互通信】 其实RN中已存在部分控件到原生控件的映射,在RN中可以直接使用,可是毕竟RN提供的组件有限,我们平时原生开发中还进行自定义控件/组件... -
RN7302测试例程
2018-08-10 19:49:13RN7302例程,已校表,电流互感器采集,淘宝核心板在售。。。 -
RN6752MQW.pdf
2019-09-18 11:02:31RN6752M是一款功能丰富,高品质的1通道高清视频解码芯片,集成了1个ADC。RN6752M的视频数据端口可编程,以标准ITU-R BT.656 4:2:2格式传输,用于D1分辨率视频。可以使用类似BT.656的格式传输更高分辨率的图像,... -
RN框架原理简介
2018-07-13 11:16:56RN框架原理简介(React Native),是初学者有一个基本的整体的认识。
-
windows运行go项目完整教程.zip
-
2021年G2电站锅炉司炉多少钱及G2电站锅炉司炉模拟考试
-
小学数学知识点大全 (几何的初步知识)<NLP 颜色标记>
-
小学数学知识点大全 (性质和规律)<NLP 颜色标记>
-
(新)备战2021软考系统集成基础知识套餐
-
【数据分析-随到随学】数据可视化
-
(新)备战2021软考信息安全工程师通关套餐
-
rabbitmq-server-3.8.9.exe
-
2021年P气瓶充装考试平台及P气瓶充装模拟考试题库
-
01 Python编程语言历史及特性.mp4
-
萝丽双路双向电调 - 引脚简略图.jpg
-
Binary indexed tree
-
信号的采样及采样定理.pdf
-
Cocos Creator游戏开发-连连看 (接入腾讯优量汇广告)
-
Spring-test事务自动回滚 及@Transactional 详解
-
2019-2-10
-
史上最全!北大青鸟java学士后第二单元超市账单管理系统(包含oracle数据库创建的SQL代码)只要配置好JNDI就可以运行
-
(新)备战2021软考网络规划设计师培训学习套餐
-
Linux中的输入输出管理
-
Java星选一卡通