React Native findNodeHandle直接操作 - 调用组件内部方法

[1uokun]

用法

• JS端通过ref直接操作组件内方法

  import { findNodeHandle } from 'react-native'
  
  <ScrollView 
   ref={ref => {
     this._scrollview = ref;
   }}>
  </ScrollView>
  
  // 滚动到指定位置
  this._scrollview.scrollTo(x, y, animated)

• 直接操作原生模块内的方法 通过findNodeHandle获取_nativeTag并赋值给 this._handle

  import { NativeModules, findNodeHandle } from 'react-native'
  
  <ScrollView 
   ref={ref => {
     this._handle = findNodeHandle(ref)
   }}>
  </ScrollView>
  
  // 滚动到指定位置
  NativeModules.ScrollViewModule.scrollTo(this._handle, x, y, animated)

示例代码

这里以<ScrollView>组件封装设计为例，介绍如何一步一步实现原生模块

index.js

import { NativeModules, findNodeHandle } from 'react-native'
const ScrollViewClass = NativeModuls.ScrollViewModule

class ScrollView extends React.Component {
  _setScrollViewRef=(ref)=>{
    this._scrollViewRef = findNodeHandle(ref)
  }

  scrollTo=({x, y, animated})=>{
     // 这里有两种方式实现🎉🌟🎉🌟🎉🌟
     // 详见下面代码
  }

  render(){
    return (
       <ScrollViewClass {...props} ref={this._setScrollViewRef}>
    )
  }
}

方式一：UIManager的Command模式

JavaScript

import { UIManager } from 'react-native'

scrollTo=()=>{

  UIManager.dispatchViewManagerCommand(
    this._setScrollViewRef,  // 告诉原生需要定位到的组件
    UIManager.RCTScrollView.Commands.scrollTo,  // 原生getCommandsMap提前定义好的命令
    [x, y, animated],  // 携带的参数ReadableArray
  )

}

获取命令常量这里建议使用 UIManager.RCTXXX.Commands.* RN0.60+版本可以用UIManager.getViewManagerConfig('RCTXXX').Commands但不兼容老版本

1.1 Android实现过程

1.1.1 ScrollViewManager.class

继承GroupManager.class/ViewManager.class,在这里重写getCommandsMap()和receiveCommand()方法

class ScrollViewManager  extends GroupManager {

  public static final String REACT_CLASS = "RCTScrollView";

  public static final int COMMAND_SCROLL_TO = 1;
  public static final int COMMAND_SCROLL_TO_END = 2;

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  /**
   * 重写getCommandsMap
   * 
   * @return map 返回为receiveCommand注册的命令集合
   **/  
  @Override
  public Map<String,Integer> getCommandsMap() {
    Map<String, Integer> map = new HashMap<>();
    map.put("scrollTo", COMMAND_SCROLL_TO);
    map.put("scrollToEnd", COMMAND_SCROLL_TO_END);
    return map;
  }

  /**
   * 重写receiveCommand
   *
   * @param root 当前接收命令的ViewManager实例
   * @param commandId 命令id，与getCommandMap内定义的对应
   * @param args 可选参数
   **/
  @Override
  public void receiveCommand(
    ScrollViewManager root,
    int commandId, 
    @Nullable ReadableArray args) {
    switch (commandId) {
      case COMMAND_SCROLL_TO:{
          root.scrollTo(
                (int)args.getDouble(0),
                (int)args.getDouble(1),
                args.getBoolean(2))
      }
      case COMMAND_SCROLL_TO_END:{
          boolean animated = args.getBoolean(0);
          root.scrollToEnd(animated)
      }
    }
  }
}

1.2 iOS实现过程

1.2.1 RCTScrollViewManageer.h

// .h
#import <React/RCTViewManager.h>

@interface RCTScrollViewManager : RCTViewManager

@end

1.2.1 RCTScrollViewManageer.m

也是使用addUIBlock固定写法。 不过和android不同，iOS可以直接在ViewManager中使用RCT_EXPORT_METHOD()，并且指定方法也会自动注册到Commands，不像android需要手动重写getCommandsMap

// .m
#import "RCTScrollViewManager.h"

@implementation RCTScrollViewManager

RCT_EXPORT_MODULE()

//注册scrollTo方法
RCT_EXPORT_METHOD(scrollTo:(nonnull NSNumber *)reactTag
                  offsetX:(CGFloat)x
                  offsetY:(CGFloat)y
                  animated:(BOOL)animated)
{
   [ self.bridge.uiManager addUIBlock:
     ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry)
     {
        //通过tag获取到当前view实例
        UIView *view = viewRegistry[reactTag];
        // 调用ios系统组件自带方法
        if ([view conformsToProtocol:@protocol(RCTScrollableProtocol)]) { //加保护判断是不是scrollview
           [(id<RCTScrollableProtocol>)view scrollToOffset:(CGPoint){x, y} animated:animated];
        }
     }

   ]
}

方式二： 原生模块与原生UI组件结合使用

JavaScript直接调用ReactMethod / RCT_EXPORT_METHOD 原生方法

import { NativeModules } from 'react-native'

scrollTo=()=>{

  NativeModules.ScrollViewModule.scrollTo(this._setScrollViewRef, x, y, animated)

}

2.1 Android实现过程

2.1.1 ScrollViewManager.class

和上面1.1.1一样，但不再重写getCommandsMap()和receiveCommand()方法

2.1.2 ScrollViewModule.class

需要额外声明ScrollViewModule类继承ReactContextBaseJavaModule.class， 在这里创建scrollTo()ReactMethod方法

public class ScrollViewModule extends ReactContextBaseJavaModule {
    @Override
    public String getName() {
        return "ScrollViewModule";
    }

    public ScrollViewModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    /**
     * 创建scrollTo方法
     *
     * @param viewTag  由findNodeHandle创建
     *        the view tag of the parent view
     *
     * @param x
     * @param y
     * @param animated
     **/
    @ReactMethod
    public void scrollTo(final int viewTag, int x, int y, boolean animated) {
        final ReactApplicationContext context = getReactApplicationContext();

        //固定写法：通过拓展uiManager实现定位ViewManager
        UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
        uiManager.addUIBlock(new UIBlock() {

            @Override
            public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
                final ScrollView scrollview;

                try {
                    scrollview = (ScrollView) nativeViewHierarchyManager.resolveView(viewTag);
                    // 调用自带的scrollTo方法
                    scrollview.scrollTo(x, y, animated);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }
}

2.1.2 ScrollViewPackage.class

在ReactPackage中同时注册createNativeModules和createViewManagers

public class ScrollViewPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(
                new ScrollViewModule(reactContext) // <- add here
        );
    }

    // Deprecated as of RN 0.47.0
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> modules = new ArrayList<>();
        modules.add(new ScrollViewManager(reactContext)); // <- add here
        return modules;
    }
}

2.2 iOS实现过程

同1.2

2.3 iOS的RCT_EXPORT_METHOD宏和android的@ReactMethod注释区别

// iOS native
RCT_EXPORT_METHOD(scrollTo, ...)
RCT_EXPORT_METHOD(scrollToEnd, ...)

// android native
@ReactMethod
public void scrollTo(int viewTag ...)

// index.js
console.log(UIManager.RCTScrollView)
console.log(NativeModules.ScrollViewManager)

JavaScript打印结果	iOS	android
UIManager.RCTScrollView.Commands	{scrollTo: 1, scrollToEnd: 2}	undefined
NativeModules.ScrollViewManager	{scrollTo: fn(), scrollToEnd: fn() }	{scrollTo: fn(), scrollToEnd: fn() }

iOS会同时自动注册到Commands和NativeModule方法集合中，而 android是用@ReactMethod和getCommandMap()分开注册的。

其他：measure文档补完

老版本：

import {
  ...
  findNodeHandle,
} from 'react-native';

var RCTUIManager = require('NativeModules').UIManager;

var view = this.refs['yourRef']; // Where view is a ref obtained through <View ref='ref'/>
RCTUIManager.measure(findNodeHandle(view), (fx, fy, width, height, px, py) => {
  console.log('Component width is: ' + width)
  console.log('Component height is: ' + height)
  console.log('X offset to frame: ' + fx)
  console.log('Y offset to frame: ' + fy)
  console.log('X offset to page: ' + px)
  console.log('Y offset to page: ' + py)
})

现可直接使用

this.refs['yourRef'].measure(findNodeHandle(view), (fx, fy, width, height, px, py) => {
  console.log('Component width is: ' + width)
  console.log('Component height is: ' + height)
  console.log('X offset to frame: ' + fx)
  console.log('Y offset to frame: ' + fy)
  console.log('X offset to page: ' + px)
  console.log('Y offset to page: ' + py)
})

Reference

• [1] 更多补完文档请参阅https://github.com/React-Sextant/react-native-bridge-docs

[1uokun]

hook

yourRef.current.measure((fx, fy, width, height, px, py) => {})

[vishwajeet-wingify]

How to get the layout changes of yourRef or multiple refs [yourRefs] e.g. when keyboard hide and shows