ReactNaviveアプリにダークモードを適用する

環境

  • node v12.9.1
  • yarn 1.22.0
  • react-navigation 4x

手順

  1. react-native-appearanceをインストール
    yarn add react-native-appearance

2.ルートコンポーネントを次のように設定する

import { AppearanceProvider, useColorScheme } from 'react-native-appearance';



const Navigation = createAppContainer(RootStack);

export default () => {
  let theme = useColorScheme();

  return (
    <AppearanceProvider>
      <Navigation theme={theme} />
    </AppearanceProvider>
  )
}

これで終わり!あっという間でした。

参考

React Navigation themes

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。
search previous next tag category expand menu location phone mail time cart zoom edit close