Help us understand the problem. What is going on with this article?

React Native for macOS で新しく追加されたファイル

React Native と React Native for macOS の差分

2020年5月19日、MicrosoftからReact Native for macOS公開についてブログでアナウンスがありました。

Announcing React Native for macOS and more · React Native for Windows + macOS

Microsoftは2019年5月7日に多くのコンポーネントをC++で書き直したReact Native for Windowsを公開しており、今回はmacOS用のネイティブライブラリなどが追加されています。

今回、本家FacebookのReact Nativeと比べてどのようなファイルがコミットされているかを調べてみました。

調査は2020年5月29日のmasterで行いました。

トップディレクトリの差分

+ .ado
+ .appveyor
+ Folly
+ ReactApple
+ android-patches
+ danger
- docs
+ double-conversion
+ follybuild
+ glog
+ jsc
+ metadata
+ processor
+ stubs/glog
+ v8-docker-build
+ website/server
+ flowconfig.macos
+ Brewfile
+ CHANGELOG.json
+ CODE_OF_CONDUCT.md
+ KeepingRecent.md
- index.js
- interface.js

概要

トップディレクトリの主な差分は

  1. ライブラリの追加
  2. Microsoftの管理用と思われるファイル

の2つです。

1. ライブラリの追加

React Native for macOSには以下のライブラリが追加されてました。

ライブラリ名 開発チーム 概要
Folly Facebook C++ ライブラリ
Infer annotations Facebook Java アノテーションライブラリ
glog Google C++ ロギングライブラリ
double-conversion Google C++ binary-decimal convertライブラリ

2. Microsoftの管理用と思われるファイル

ファイル / ディレクトリ 概要
.appveyor/config.yml OSにWindowsを使っていることを特徴としたCI、AppVeyorの設定ファイル
ReactApple/ReactApple.nuspec .NET用パッケージNuGetのメタファイル
android-patches "patches-droid-office-grouped" というディレクトリから推測すると、AndroidのOffice用のパッチファイルか。
metadata/repo.json リポジトリ管理用のjsonファイル。
docsList.js Websiteのドキュメント管理用?

補足: metadata/repo.json

metadata/repo.json

{
  "description": "Fork of facebook's react-native implementation.  Include additional platform implementations for Mac, Win32 and UWP.  And implementation of the JS bridge against Chakra.",
  "schema": {
    "office": "1.0.0"
  },
  "deployedToProduction": true,
  "complianceTypes": [],
  "inventoryId": ["684c3345-709f-474d-9f83-726e63a64237"],
  "contacts": ["acoates@microsoft.com"]
}

"description": "Fork of facebook's react-native implementation. Include additional platform implementations for Mac, Win32 and UWP. And implementation of the JS bridge against Chakra."

ChakraはIEなどで使われていたJSエンジン。Microsoft EdgeはChromiumベースなのでV8なはず。WindowsのJSエンジンとしてのChakraと思われる。

その他追加されているファイル

ファイル / ディレクトリ 概要
danger/dangerfile.js GitHub拡張用のJSファイル。bots/dangerfile.js のバックアップ?
jsc Appleが開発したJSエンジンであるJSC ( JavaScriptCore ) のヘッダーファイルたち。initial コミットから修正なし。
.ado ローカルにnpmレジストリを作成できる Verdaccio とCI関連のファイル

Reactディレクトリ以下の差分

% diff -rq react-native/React/ react-native-macos/React/ | grep 'Only in react-native-macos'
Only in react-native-macos/React/Base: RCTBridge+Cxx.h
Only in react-native-macos/React/Base: RCTBridge+Cxx.mm
Only in react-native-macos/React/Base: RCTPlatformDisplayLink.h
Only in react-native-macos/React/Base: RCTUIKit.h
Only in react-native-macos/React/Base: macOS
Only in react-native-macos/React/CoreModules: RCTImageEditingManager.h
Only in react-native-macos/React/CoreModules: RCTImageEditingManager.m
Only in react-native-macos/React/CoreModules: RCTImageLoader.h
Only in react-native-macos/React/CoreModules: RCTImageLoader.mm
Only in react-native-macos/React/CoreModules: RCTImageStoreManager.h
Only in react-native-macos/React/CoreModules: RCTImageStoreManager.m
Only in react-native-macos/React/DevSupport: RCTDevLoadingView.h
Only in react-native-macos/React/DevSupport: RCTDevLoadingView.m
Only in react-native-macos/React/DevSupport: RCTDevMenu.h
Only in react-native-macos/React/DevSupport: RCTDevMenu.m
Only in react-native-macos/React/Modules: RCTAccessibilityManager.h
Only in react-native-macos/React/Modules: RCTAccessibilityManager.m
Only in react-native-macos/React/Modules: RCTAlertManager.h
Only in react-native-macos/React/Modules: RCTAlertManager.m
Only in react-native-macos/React/Modules: RCTAppState.h
Only in react-native-macos/React/Modules: RCTAppState.m
Only in react-native-macos/React/Modules: RCTAsyncLocalStorage.h
Only in react-native-macos/React/Modules: RCTAsyncLocalStorage.m
Only in react-native-macos/React/Modules: RCTClipboard.h
Only in react-native-macos/React/Modules: RCTClipboard.m
Only in react-native-macos/React/Modules: RCTDevSettings.h
Only in react-native-macos/React/Modules: RCTDevSettings.mm
Only in react-native-macos/React/Modules: RCTDeviceInfo.h
Only in react-native-macos/React/Modules: RCTDeviceInfo.m
Only in react-native-macos/React/Modules: RCTI18nManager.h
Only in react-native-macos/React/Modules: RCTI18nManager.m
Only in react-native-macos/React/Modules: RCTKeyboardObserver.h
Only in react-native-macos/React/Modules: RCTKeyboardObserver.m
Only in react-native-macos/React/Modules: RCTRedBox.h
Only in react-native-macos/React/Modules: RCTRedBox.m
Only in react-native-macos/React/Modules: RCTSourceCode.h
Only in react-native-macos/React/Modules: RCTSourceCode.m
Only in react-native-macos/React/Modules: RCTStatusBarManager.h
Only in react-native-macos/React/Modules: RCTStatusBarManager.m
Only in react-native-macos/React/Modules: RCTTVNavigationEventEmitter.h
Only in react-native-macos/React/Modules: RCTTVNavigationEventEmitter.m
Only in react-native-macos/React/Modules: RCTTiming.h
Only in react-native-macos/React/Modules: RCTTiming.m
Only in react-native-macos/React/Profiler: RCTFPSGraph.h
Only in react-native-macos/React/Profiler: RCTFPSGraph.m
Only in react-native-macos/React/Profiler: RCTPerfMonitor.m
Only in react-native-macos/React/Views: RCTFontSmoothing.h
Only in react-native-macos/React/Views: RCTModalManager.h
Only in react-native-macos/React/Views: RCTModalManager.m
Only in react-native-macos/React/Views: RCTProgressView.h
Only in react-native-macos/React/Views: RCTProgressView.m
Only in react-native-macos/React/Views: RCTRefreshControl.h
Only in react-native-macos/React/Views: RCTRefreshControl.m
Only in react-native-macos/React/Views: RCTRefreshControlManager.h
Only in react-native-macos/React/Views: RCTRefreshControlManager.m

概要

macOS用のネイティブライブラリ群が追加されてます。macOSプラットフォーム関連として React/Base/macOS ディレクトリが追加されました。

% ls React/Base/macOS
RCTDynamicColor.h
RCTDynamicColor.m
RCTPlatform.m
RCTPlatformDisplayLink.m
RCTUIKit.m

RCTUIKit.m

React Native はUI描画のOSによる差分を吸収し、同じレイアウト構成(YogaによるFlexbox)を構築することが大きな特徴の一つです。

macOSのUIクラスであるUIKitについて、UIImage / NSImageを扱うために書かれたファイル。

NSImage *UIGraphicsGetImageFromCurrentImageContext(void)
{
    NSImage *image = nil;
    NSGraphicsContext *graphicsContext = [NSGraphicsContext currentContext];

    NSValue *sizeValue = objc_getAssociatedObject(graphicsContext, &RCTGraphicsContextSizeKey);
    if (sizeValue != nil) {
        CGImageRef cgImage = CGBitmapContextCreateImage([graphicsContext CGContext]);

        if (cgImage != NULL) {
            image = [[NSImage alloc] initWithCGImage:cgImage size:[sizeValue sizeValue]];
            CFRelease(cgImage);
        }
    }

    return image;
}

CGFloat UIImageGetScale(NSImage *image)
{
  if (image == nil) {
    return 0.0;
  }

  RCTAssert(image.representations.count == 1, @"The scale can only be derived if the image has one representation.");

  NSImageRep *imageRep = image.representations.firstObject;
  if (imageRep != nil) {
    NSSize imageSize = image.size;
    NSSize repSize = CGSizeMake(imageRep.pixelsWide, imageRep.pixelsHigh);

    return round(fmax(repSize.width / imageSize.width, repSize.height / imageSize.height));
  }

  return 1.0;
}

React Native for macOS の歴史

年月 出来ごと
2019年3月6日 v0.0.1-microsoft.0がリリース
2019年5月7日 MicrosoftがReact Native for Windowsを公開
2020年5月19日 MicrosoftのReact Native BlogでReact Native for macOSをアナウンス
shoken
KitchHike CTO https://kitchhike.com React Native, React, Rails, MongoDB
https://kitchhike.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした