React-native findNodeHandle相关源码学习

findNumericNodeHandleFiber | findNodeHandle 源码分析

• 用例

  import React, { Component } from 'react';
  import {View,findNodeHandle} from 'react-native';
  
  type Props = {};
  export default class App extends Component {
    componentDidMount(){
    
    	//findNodeHandle() ==>查找对应组件实例的tag值
    	
  	UIManager.measure(findNodeHandle(this.refs.container),()=>{})
    }
    render() {
      return (
        <View style={{flex:1}} ref="container"></View>
      );
    }
  }
  

• 说明

  • 源码文件

    node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js
    	3662行
    	3728行
    

  • 方法公开

    	findNodeHandle为公开方法；
    	findNumericNodeHandleFiber为不公开方法
    	
    	//import { findNodeHandle } from 'react-native';
    	findNodeHandle  = function findNumericNodeHandleFiber(componentOrHandle) {
    	  //findNodeHandle为内部方法
    	  var instance = findNodeHandle(componentOrHandle);
    	  if (instance == null || typeof instance === "number") {
    	    return instance;
    	  }
    	  return instance._nativeTag;
    	}
    	
    	==>
    	
    	ReactNativeFiberHostComponent{
    		_nativeTag:111,
    		viewConfig:{},
    		_children:[]
    	}			
    

• 分析源码 ( 根据平台不同有所差异。但基本属性类型一致 （这里为iOS）)

  • ReactNativeFiberHostComponent

    • _nativeTag 查找对象的Tag值
    • _children 该组件下所有的子节点
    • viewConfig 配置说明 (View Text …组件的配置说明)

  • View (ReactNativeFiberHostComponent.viewConfig)配置对象

    	Commands:{}, 对应管理者导出的方法  RCT_EXPORT_METHOD(aaaaA:(NSString *)a BB:(NSString*)n){}
    	Constants:{} 对应管理者导出的属性  - (NSDictionary *)constantsToExport{}
    	Manager:"ViewManager" 视图管理者的名称
    	uiViewClassName:"RCTView"  对应视图的名称
    	NativeProps:{ //js属性对应原生视图的值类型
    		accessibilityActions: "NSString"
    		accessibilityElementsHidden: "BOOL"
    		accessibilityLabel: "NSString"
    		accessibilityTraits: "UIAccessibilityTraits"
    		accessibilityViewIsModal: "BOOL"
    		accessible: "BOOL"
    		alignContent: "YGAlign"
    		alignItems: "YGAlign"
    		alignSelf: "YGAlign"
    		....	
    	},
    	validAttributes:{ //原生视图类配置项
    		//这里是所有可设置的属性
    		accessible: true
    		alignContent: true
    		alignItems: true,
    		shadowColor: {process: ƒ}
    		shadowOffset: {diff: ƒ}
    		shadowOpacity: true
    		style:{
    			//这里是所有可设置的样式名称
    			alignContent: "alignContent"
    			alignItems: "alignItems"
    			alignSelf: "alignSelf"
    			aspectRatio: "aspectRatio"
    			backfaceVisibility: "backfaceVisibility"
    			backgroundColor: {process: ƒ}
    			borderBottomColor: {process: ƒ},
    			shadowOffset: {diff: ƒ}
    		}
    		
    		说明：
    			backgroundColor: {process: ƒ} 
    				<View backgroundColor ={"red"}> ==> {设置为backgroundColor = process("red")} 
    			shadowOffset: {diff: ƒ} 
    				<View shadowOffset ={1}> ==> {设置为shadowOffset = diff(1)} 
    			shadowOpacity: true || ""  
    				<View shadowOpacity={1}> ==> {直接设置为shadowOpacity=1}
    	}
    	
    

  • Text (ReactNativeFiberHostComponent.viewConfig)配置对象

    {
    	uiViewClassName: "RCTText"
    	validAttributes:{
    		//这里是所有可设置的属性
    		onMagicTap: true
    		pointerEvents: true
    		renderToHardwareTextureAndroid: true
    		selectable: true
    		selectionColor: true
    		shouldRasterizeIOS: true
    		style:{
    			scaleY: "scaleY"
    			shadowColor: {process: ƒ}
    			shadowOffset: {diff: ƒ}
    			shadowOpacity: "shadowOpacity"
    			shadowRadius: "shadowRadius"
    		}
    	}
    	
    	说明：
    			backgroundColor: {process: ƒ} 
    				<View backgroundColor ={"red"}> ==> {设置为backgroundColor = process("red")} 
    			shadowOffset: {diff: ƒ} 
    				<View shadowOffset ={1}> ==> {设置为shadowOffset = diff(1)} 
    			shadowOpacity: true || ""  
    				<View shadowOpacity={1}> ==> {直接设置为shadowOpacity=1}
    	}
    

  • TextInput (ReactNativeFiberHostComponent.viewConfig)配置对象

    	Commands:{}, 说明见View 
    	Constants:{} 说明见View 
    	Manager:"SinglelineTextInputViewManager" 视图管理者的名称
    	uiViewClassName:"RCTSinglelineTextInputView"  对应视图的名称
    	baseModuleName: "RCTBaseTextInputView",继承关系
    	NativeProps:{},
    	validAttributes:{
    		说明见View 
    	}
    

  • 自定义View (ReactNativeFiberHostComponent.viewConfig)配置对象

    #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){}
    //导出事件名
    - (NSArray<NSString *> *)supportedEvents{
      return @[@"EventName1",@"EventName2",@"EventName3"];
    }
    //导出常量
    -(NSDictionary *)constantsToExport{
      return @{
               @"name":@"无名氏",
               @"age":@26,
               @"desc":@"宅男一个"
               };
    }
    
    @end
    
    

    Commands:{
    	domeMethod: 0 对应导出的方法
    	domeMethod2: 1
    }
    Constants:{//导出常量
    	age: 26  
    	desc: "宅男一个"
    	name: "无名氏"
    }
    Manager: "ABCDViewManager" 对应视图管理者
    NativeProps: {name: "NSString", centerSize: "CGSize"} 导出的属性
    baseModuleName: "RCTView"  继承关系
    

• 总结

  • 了解js 和 原生通讯过程

  • 了解组件 所有可设置属性

  • 了解组件 所有可设置样式

  • 自定义组件 所有颜色值 都需要 进行process处理

  • 关于组件setNativeProps处理流程和属性设置

    
    	this.refs.ViewRef.setNativeProps({
    		//属性设置
    		backgroundColor:"xx"
        	style:{
        		color:"red"
        		样式设置
        	}
      })