UIManager源码学习

UIManager

• UIManager对象

  	ABCDView: {NativeProps: {…}, directEventTypes: {…}, Manager: "ABCDViewManager", bubblingEventTypes: {…}, baseModuleName: "RCTView", …}
  	RCTActivityIndicatorView: {NativeProps: {…}, directEventTypes: {…}, Manager: "ActivityIndicatorViewManager", bubblingEventTypes: {…}, baseModuleName: "RCTView", …}
  	RCTBaseText: {NativeProps: {…}, directEventTypes: {…}, Manager: "BaseText", bubblingEventTypes: {…}, baseModuleName: "RCTView", …}
  	RCTBaseTextInputView: {NativeProps: {…}, directEventTypes: {…}, Manager: "BaseTextInputViewManager", bubblingEventTypes: {…}, baseModuleName: "RCTBaseText", …}
  	...
  	//这里是所有导出的原生UI组件
  	...
  	//UIManager管理导出的方法
  	blur: ƒ fn()
  	clearJSResponder: ƒ fn()
  	configureNextLayoutAnimation: ƒ fn()
  	createView: ƒ fn()
  	dispatchViewManagerCommand: ƒ fn()
  	findSubviewIn: ƒ fn()
  	focus: ƒ fn()
  	manageChildren: ƒ fn()
  	measure: ƒ fn()
  	measureInWindow: ƒ fn()
  	measureLayout: ƒ fn()
  	measureLayoutRelativeToParent: ƒ fn()
  	measureViewsInRect: ƒ fn()
  	removeRootView: ƒ fn()
  	removeSubviewsFromContainerWithID: ƒ fn()
  	replaceExistingNonRootView: ƒ fn()
  	setChildren: ƒ fn()
  	setJSResponder: ƒ fn()
  	takeSnapshot: ƒ ()
  	updateView: ƒ fn()
  	viewIsDescendantOf: ƒ fn()
  	__takeSnapshot: ƒ fn()
  

  • 系统组件 RCTView 说明

    RCTView:
    	Commands: Object 组件导出的命令（可执行方法）
    	Constants: Object 组件导出的常量
    	Manager: "ViewManager" 该组件的管理者
    	NativeProps: {left: "YGValue"} 组件属性名和类型对应关系
    	baseModuleName: null //继承关系
    	bubblingEventTypes:{}
    	directEventTypes:{}
    	propTypes: {}
    	uiViewClassName: "RCTView" //组件名称
    	validAttributes: 所有属性和样式说明
    

  • 自定义组件 ABCDView

    #import "ABCDViewManager.h"
    #import "ABCDView.h"
    @implementation ABCDViewManager
    //导出模块管理
    RCT_EXPORT_MODULE();
    -(UIView*)view{
     return [[ABCDView alloc] init];
    }
    //导出属性
    RCT_EXPORT_VIEW_PROPERTY(name, NSString);
    RCT_CUSTOM_VIEW_PROPERTY(centerSize, CGSize, ABCDView){
     CGSize size = [RCTConvert CGSize:json];
     [view setCenterSize:size];
    }
    //导出方法
    RCT_EXPORT_METHOD(domeMethod){}
    RCT_REMAP_METHOD(domeMethod2, A:(NSString*)name B:(CGSize)size){}
    //导出常量
    -(NSDictionary *)constantsToExport{
     return @{
         	@"name":@"无名氏",
         @"age":@26,
    	   @"desc":@"宅男一个"
        };
    }
    @end
    

    ABCDView:
    	Commands: 
    		domeMethod: 0
    		domeMethod2: 1
    
    	Constants: 
    		age: 26
    		desc: "宅男一个"
    		name: "无名氏"
    	Manager: "ABCDViewManager"
    	NativeProps: {name: "NSString", centerSize: "CGSize"}
    	baseModuleName: "RCTView"
    	bubblingEventTypes: {}
    	directEventTypes: {}
    

• UIManager 方法说明

  • focus

  • blur

    node_modules/react-native/React/Views/UIView+React.m
    指定的组件失去|成为第一响应者
    - (void)reactBlur {
    	[self resignFirstResponder];
    }
    - (void)reactFocus {
      if (![self becomeFirstResponder]) {
        self.reactIsFocusNeeded = YES;
      }
    }
    

  • measure

  • measureInWindow

    render(){
    	return <View ref="dome"/>
    }
    
    UIManager.measure(findNodeHandle(this.refs.dome),(x,y,w,h)=>{})
    	
    measure  得到指定视图在父级中位置
    measureInWindow 得到视图相对窗口的位置
    

  • measureLayout

    子视图 相对 祖先视图的偏移 (最大的深度为30)
    UIManager.measureLayout(findNodeHandle(this.refs.ABCD),findNodeHandle(this.refs.AAAA),()=>{},(l,t,w,h)=>{
    	l:left偏移
    	t:顶部偏移
    	w,h:宽高
    })
    

  • takeSnapshot

  • __takeSnapshot

    把UI视图进行转变为图片
    node_modules/react-native/Libraries/ReactNative/UIManager.js
    源码
    UIManager.__takeSnapshot = UIManager.takeSnapshot;
    UIManager.takeSnapshot = function() {
      invariant(
        false,
        'UIManager.takeSnapshot should not be called directly. ' +
          'Use ReactNative.takeSnapshot instead.',
      );
    };
    
    可以看出 不能直接使用takeSnapshot; 
    截图转换方法
    	> UIManager.__takeSnapshot继续截图操作
    	>  var ReactNative = require('react-native');
    	   ReactNative.takeSnapshot
    

  • setLayoutAnimationEnabledExperimental

    解除安卓平台上 LayoutAnimation限制
    UIManager.setLayoutAnimationEnabledExperimental(true)
    

  • updateView

    直接更新原生视图
    node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js
    
    setNativeProps源码
    ReactNativeComponent.prototype.setNativeProps = function setNativeProps(
        nativeProps
      ) {
        .....
        if (updatePayload != null) {
          UIManager.updateView(
            maybeInstance._nativeTag,
            viewConfig.uiViewClassName,
            updatePayload
          );
        }
      };
    updateView(
    	19,//对象tag值
    	"RCTView",//视图名称
    	{},//viewConfig 需要更新的样式和属性
    )
    优点:直接更新原生视图 性能高
    缺点:不能记录state值
    

  • findSubviewIn

    根据父组件 以及对应位置 找到子组件
    UIManager.findSubviewIn(
    	Tag,
    	[locationX, locationY],
    	(nativeViewTag, left, top, width, height) => {
    	}
    );
    

  • measureViewsInRect

    获取范围内的所有直接子视图位置信息
    UIManager.measureViewsInRect([0,0,375,667],findNodeHandle(this.refs.AAAA),()=>{},(as)=>{
    debugger
    })
    

  • setChildren | createView

    内部创建视图
    
    <View/>
    <Text/>
    
    ==> 都会转为为
    
    createView 
    
    ==>
    
    原生创建对应组件
    

  • dispatchViewManagerCommand (原生 和 RN交互)

    用于派发任务到原生 （操作视图）
    利用上面ABCDViewManager 演示器作用
    
    1:ViewViewManager
    	const { ABCDViewManager, UIManager } = NativeModules;
    	ABCDViewManager.domeMethod2(xx,oo)
    	
    2: UIManager
    	
    	let reactTag = findNodeHandle(this.refs.View)
    	let commandId = UIManager.ABCDView.Commands.domeMethod2;
    	UIManager.dispatchViewManagerCommand(reactTag,commandId,[args])