【React Native】バージョン0.64を使ってみる【ダークモードも】

React Native 0.64 がリリース

2021年3月12日、React Native 0.64 が正式にリリースされました。

Blog 揃 React Nativehttps://reactnative.dev

大きな変更点は以下の通りです。

• iOSでのHermesエンジンサポート
• Hermesがプロキシをサポート（非対応だったライブラリが少なくなった）
• Reactのバージョンが 17へ（機能的な変更はなし）

使ってみる

npx react-native init projectname

cd ios && pod install

# [!] `React` requires CocoaPods version `>= 1.10.1`, which is not satisfied by your current version, `1.10.0`.

CocoaPodsのバージョンが低く、ポッドインストールできない。

Homebrewで入れていたので、確認してアップグレードする。

brew outdated
# cocoapods (1.10.0) < 1.10.1

brew upgrade cocoapods
# ==> Upgrading cocoapods 1.10.0 -> 1.10.1

再度、Pod Installする

cd ios && pod install

起動する

yarn ios
yarn android

Hermesの有効化

Podfile

use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
+   :hermes_enabled => true
)

cd ios && pod install
# Installing hermes-engine (0.7.2)

完了。

ダークモード

何気にダークモードがデフォルトで入っている。

OS側の設定から Dark Appearance を ONにすることで自動でアプリ画面に反映される。

API自体は以前からあったもの（useColorSchemeフック）と同じ。

useColorScheme 揃 React Nativehttps://reactnative.dev

import { useColorScheme } from 'react-native';

const App: () => Node = () => {
+ const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

ベンチマーク

Hermesは開発モードでは有効になていないので、ipa作成して配布しないとと分からない。