다른 네이티브 모듈에서 기존 React Native 보기 인스턴스를 제어하는 ​​방법

React Native 프로젝트에서 네이티브 모듈 간에 상호 통신하는 방법을 작성했습니다.

React Native에서 네이티브 모듈 간의 상호 통신

마츠야마 타쿠야 ・ 2월 19일 ・ 2분 읽기

#reactnative #swift #kotlin #java

이제 다른 네이티브 모듈에서 View 인스턴스를 가져올 수 있습니다.
이를 통해 성능이 뛰어난 React Native JS 브리지를 거치지 않고 JS를 WebView에 주입하는 것과 같은 기존 보기를 제어할 수 있습니다.

React View 태그 가져오기

모든 보기 구성 요소에는 iOS의 RCTUIManager 및 Android의 UIManagerModule에서 관리하는 보기 인스턴스 식별자인 반응 태그가 있습니다.
다음과 같이 JS 앱에서 보기 태그를 얻을 수 있습니다.

import { WebView } from 'react-native-webview'

const YourComponent = (props) => {
  const webViewRef = useRef()
  useEffect(() => {
    const { current: webView } = webViewRef
    if (webView) {
      console.log(webView.webViewRef.current._nativeTag)
    }
  }, [])

  return (
    <WebView
      ref={webViewRef}
      ...
    />
  )
}

자, 네이티브 모듈에서 뷰 인스턴스를 가져오겠습니다.

아이폰 OS

RCTUIManager는 반응 태그에서 보기 인스턴스를 가져오는 방법을 제공합니다.

- (UIView *)viewForReactTag:(NSNumber *)reactTag

위 게시물에 설명된 단계에 따라 RCTBridge에 액세스할 수 있도록 브리지 모듈을 준비하십시오.
네이티브 브리지에서는 보기가 항상 동일한 스레드에서 제어되어야 하므로 기본 대기열에서 실행해야 합니다.
예를 들어 다음과 같이 reactTag로 WebView 구성 요소의 인스턴스를 가져올 수 있습니다.

#import <React/RCTUIManager.h>

RCT_EXPORT_METHOD(runJS:(NSString* __nonnull)js
                  inView:(NSNumber* __nonnull)reactTag
                  withResolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  RCTUnsafeExecuteOnMainQueueSync(^{
    RCTUIManager* uiManager = [self.bridge moduleForClass:[RCTUIManager class]];
    RNCWebView* webView = (RNCWebView*)[uiManager viewForReactTag:reactTag];
    if (webView) {
      [webView injectJavaScript:js];
    }
    resolve(@"OK");
  });
}

지정된 태그를 사용하여 webview에서 지정된 JS 코드를 실행합니다.

기계적 인조 인간

UIManagerModule는 반응 태그에서 보기 인스턴스를 가져오는 방법을 제공합니다.

public View resolveView(int tag)

위의 게시물에서 설명한 것처럼 UIManagerModule 에서 reactContext 의 인스턴스를 가져올 수 있습니다.
그런 다음 다음과 같이 보기를 얻을 수 있습니다.

  @ReactMethod
  public void injectJavaScript(int reactTag, String js) {
      UIManagerModule uiManagerModule = this.reactContext.getNativeModule(UIManagerModule.class);
      WebView webView = (WebView) uiManagerModule.resolveView(reactTag);
      webView.post(new Runnable() {
          @Override
          public void run() {
              webView.evaluateJavascript(js, null);
          }
      });
  }

이제 기본 모듈에서 기존 보기를 제어할 수 있습니다.
도움이 되길 바랍니다!

나를 따라와 &

Inkdrop — Markdown note-taking app

Solo developer's Discord community