React Native開発 ToDoアプリ#2｜ダークテーマを実装する

本記事は、Takuyaさん(https://twitter.com/inkdrop_app)のYouTube動画を見て、写経しながら勉強したときのメモになります。
Takuyaさんの動画ご覧になってみてください。ただただカッコいい動画です。
参考動画：https://www.youtube.com/watch?v=k2h7usLLBhY

前回の記事：
「React Native開発 ToDoアプリ#1｜HelloWorldを表示する」

前回分までのソースコード：GitHub
※上記のGitHubには、prettier.config.js が含まれていません。前回の記事に該当コードがあるので以下のディレクトリ構成の通り作成・配置してください。

animated-todo           # プロジェクトフォルダ 
├── App.tsx             # 前回編集した
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── prettier.config.js  # 前回編集した
├── package.json        # 前回編集した
├── tsconfig.json       # 前回編集した
└── yarn.lock           # 前回編集した

React NativeのToDoアプリハンズオンの続きです。

今回の目標は、ダークテーマを実装することです。

下記のイメージのように、トグルスイッチでテーマをLightモード、Darkモードと切り替えることができるようにします。

今回は、以下のディレクトリ構成にあるように src フォルダを新規に作成して、その下にファイルを新規作成していきます。

animated-todo         # プロジェクトフォルダ
├── App.tsx           # 今回編集する
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── prettier.config.js
├── tsconfig.json   
├── package.json
├── yarn.lock
└── src               # 以下、新規作成していく
    ├── assets
    ├── screens
    │   └── main.tsx
    ├── components
    │   ├── app-container.tsx
    │   └── theme-toggle.tsx
    └── theme.ts

各ファイルを作成する
動作確認
ソースコードの説明
- App.tsx について
- app-container.tsx について

各ファイルを作成する

前述の「目標のディレクトリ構成」のとおり、
プロジェクトフォルダ直下に src フォルダを作成します。

src フォルダの下にフォルダおよびファイルを作成してください。

記事の後半に各ソースコードの説明をしていきます。

フォルダを作成

src フォルダの下に３つのフォルダ assets、screens、components を作成します。

main.tsx を作成

src / screens の下に、main.tsx を次のように作成します。

import * as React from 'react'
import { 
	Text, 
	View, 
	Center,
	Box,
	VStack, 
	useColorModeValue
} from 'native-base';
import ThemeToggle from '../components/theme-toggle'

export default function MainScreen(){
	return (
		<Center 
			_dark={{bg: 'blueGray.900'}} 
			_light={{bg: 'blueGray.50'}} 
			px={4} 
			flex={1} 
			>

			<VStack space={5} alignItems="center">
				<Box p={10} bg={useColorModeValue('red.500', 'yellow.500')}>
					<Text>Hello</Text>
				</Box>
				<ThemeToggle />
			</VStack>
		</Center>
	)
}

app-container.tsx を作成

src / components の下に、app-container.tsx を次のように作成します。

import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { NativeBaseProvider } from 'native-base'
import theme from '../theme'

type Props = {
	children: React.ReactNode
}

export default function AppContainer(props: Props) {
	return (
		<NavigationContainer>
			<NativeBaseProvider theme={theme }>{props.children}</NativeBaseProvider>
		</NavigationContainer>
	)
}

theme-toggle.tsx を作成

src / components の下に、theme-toggle.tsx を次のように作成します。

import React from 'react'
import {
	Text,
	HStack,
	Switch,
	useColorMode
	} from 'native-base'

export default function ThemeToggle() {

	const { colorMode, toggleColorMode} = useColorMode()
	return(
		<HStack space={2} alignItems = "center" >
			<Text>Dark</Text>
			<Switch
				isChecked={colorMode === 'light'}
				onToggle={toggleColorMode}
				></Switch>
			<Text>Light</Text>
		</HStack>
	)	
}

theme.ts を作成

src の直下に、theme.ts を次のように作成します。

import { extendTheme } from 'native-base'

const config = {
	useSystemColorMode: false,
	initialColorMode: 'light'
}

const colors = {
	primary: {
		50: '#EEF2F6',
		100: '#CFD9E7',
		200: '#B1C1D8',
		300: '#92A9C9',
		400: '#7491B9',
		500: '#5578AA',
		600: '#446088',
		700: '#334866',
		800: '#223044',
		900: '#111822',
	}
}

export default extendTheme({config, colors })

App.tsx を編集

プロジェクトフォルダ（animated-todo）の直下にある、App.tsx を次のようにします。

import React from 'react'
import AppContainer from './src/components/app-container'
import Main from './src/screens/main'

export default function App() {
  return (
    <AppContainer>
	    <Main />
    </AppContainer>
  );
}

動作確認

前述のファイルを準備したら、「yarn start」コマンドを実行して動作確認してみてください。

仮想iPhoneを使った動作確認の方法

次のようになっていれば成功です！

ソースコードの説明

今回、新規に作成したファイルは簡潔に説明すると次のような役割を持っています。

animated-todo       # プロジェクトフォルダ
├── App.tsx         # このファイルが元になる
〜
〜
└── src               
    ├── assets
    ├── screens
    │   └── main.tsx           # 目に見えるテキストや色を記述している
    ├── components
    │   ├── app-container.tsx  #
    │   └── theme-toggle.tsx   #
    └── theme.ts               #

App.tsx について

App.tsx は以下の通りです。

import React from 'react'
import AppContainer from './src/components/app-container'
import Main from './src/screens/main'

export default function App() {
  return (
    <AppContainer>
	    <Main />
    </AppContainer>
  );
}

まずは、import について説明します。

import 〜 from 〜：
・外部ファイルから宣言したものを使用できるようになります。
・from のあとに外部ファイルのパスを書きます。
・import のあとにファイル内で使用する名前を書きます。
・参考サイト：js STUDIO「モジュール」
まくろぐ「TypeScriptのモジュールのインポートには import を使う」

プロジェクトを作成したとき、初期画面に表示されているテキストは、このApp.tsx に書かれていました。

前回、Hello World を表示するときも、このApp.tsx に直接書きました。

しかし、すべての処理をApp.tsx に書いていくわけではありません。役割ごとにファイルを分けて作成していく。（その分け方の流派の一つがオブジェクト指向）

app-container.tsx について

app-container.tsx は以下の通りです。

import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { NativeBaseProvider } from 'native-base'
import theme from '../theme'

type Props = {
	children: React.ReactNode
}

export default function AppContainer(props: Props) {
	return (
		<NavigationContainer>
			<NativeBaseProvider theme={theme }>{props.children}</NativeBaseProvider>
		</NavigationContainer>
	)
}

ポイントは２点あります。「NavigationContainer」と「NativeBaseProvider」です。

NavigationContainer：
・ReactNativeアプリのルーティングで使用できるライブラリ
・つまり、画面遷移を設定するときに使用する
・参考サイト：Qiita「React Native で画面遷移やタブメニュー【react-navigation 5.x】」

NativeBaseProvider：
・テーマの設定をするときに使用する
・デフォルトの色などを変更する場合は、native-baseからthemeを拡張する
・参考サイト：NativeBase「Setup NativeBase Provider」