LoginSignup
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@shoken(Shoken Fujisaki)

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

Last updated at Posted at 2020-05-29

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をアナウンス
7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?