【13】React Nativeでテキストエディタを作ってみる!【テーマ機能の実装】

こんにちは!かたつむり(@Katatumuri_nyan)です!

Reactを触ってみて、サイト的なものは作れるようになりました(*´ω`)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)

ここまでで、ファイルの読み書きやデザインなどはだいたいできてきたので、機能を追加していきます!
今回は、アプリの色を変更できるテーマ機能を実装していきます。

第9回目の「App.jsの作成」あたりで、テーマ機能の追加・設定をすでにしています。
今回は、各テーマのカラーをtheme.jsに追加していくのと、ユーザーがテーマを選べるようにしていきます!

GitHubでソースコードを管理しています!

最初から見る↓
【1】React Nativeでテキストエディタを作ってみる!【下調べ編】【1】React Nativeでテキストエディタを作ってみる!【下調べ編】

前回を見る↓
【12】React Nativeでテキストエディタを作ってみる!【ファイルシステム編】【12】React Nativeでテキストエディタを作ってみる!【ファイルシステム編】

出来上がりのデモ

↑テーマ機能の完成版ははこんな感じです!

ユーザーがテーマを選べるようにする

picture 12

まずは、↑このようにユーザーがテーマを選べるようにします。
テーマ情報はsnailSetting.jsonに保存しているので、ここにユーザーが選んだテーマを上書きしていきます。

テーマ選択のためのピッカーの導入

テーマが複数あるので、テーマリストの中から選んでもらうために、ピッカーを導入します。
react-native-picker/pickerからインストールしていきます!
npm install @react-native-picker/picker --save --legacy-peer-deps

export const themeList=[
    'Night',
    'RoseQuartz'
]

theme.jsにてthemeListを作成しておきました。

これをSetting,jsにインポートして使用していきます。

テーマ管理を簡単にするため、テーマリストはテーマの中で管理します。

<Picker
    selectedValue={selectedTheme}
    onValueChange={(itemValue, itemIndex) =>
        setSelectedTheme(itemValue)
    }>
    {themeList.map(e=>{
        return(
            <Picker.Item key={e} label={e} value={e} />
        )
    })}

</Picker>

↑このように、Setting.jsにピッカーを導入しました。

picture 13
Android↑
iPad↓
picture 14

↑こんな感じで表示されました!

const [appTheme, setAppTheme] = useState("Night")

↑既に作成しているこのステートを更新することで、テーマを変更できるようになりました。

↑デモ動画

ピッカーのデザイン変更

ピッカーのデザインを変更していきます。
思ってたよりAndroidとiPadでピッカーが違いすぎるので、適度にやっていきます!

picture 15
↑Android
iPad↓
picture 16

スタイルの適応範囲が制限されているみたいだったので、このくらいにしておきました。

選んだテーマを保存する

テーマを選ぶだけだと、アプリを閉じたらテーマが保存されないので、テーマを保存していきます。
readSetting.jsで書き込みの設定をします!

export async function setThemeSetting(themeName) {
    const settingData = await FS.readAsStringAsync(fileUri, { encoding: FileSystem.EncodingType.UTF8 })
        .then(e => {
            return e
        }).catch(err => {
            console.error("setThemeSetting>>readAsStringAsync >>" + err);
        })

    let new_settingData_json = await JSON.parse(settingData)
    new_settingData_json["theme"] = themeName


    await FS.writeAsStringAsync(fileUri, JSON.stringify(new_settingData_json), { encoding: FileSystem.EncodingType.UTF8 })
        .then(e => {
            return e
        }).catch(err => {
            console.log(fileUri);
            console.error("setThemeSetting>>writeAsStringAsync >>" + err);
        })

    return JSON.parse(settingData)
}

↑こんな感じでテーマ情報を上書きすることができました。

テーマの色を拾っていく。

picture 17

↑これだけテーマを作ったので、色をtheme.jsに追加していきます。

プレビュー画面の色設定

右側のプレビュー画面の色を、テーマカラーと一緒にするか、白黒にするか選べるようにします。

その設定も設定ファイルに保存しておきます!

picture 19

↑このように、選べるようにしました。

コードはテーマ選択の時と変わらないので省略します。

次はファイルのインポート・エクスポートをしていきます!

↓続き
【14】React Nativeでテキストエディタを作ってみる!【インポート・エクスポート編】【14】React Nativeでテキストエディタを作ってみる!【インポート・エクスポート編】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です