こんにちは！かたつむり(@Katatumuri_nyan)です！
Reactを触ってみて、サイト的なものは作れるようになりました(*´ω｀)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)
ここまでで、ファイルの読み書きやデザインなどはだいたいできてきたので、機能を追加していきます！
今回は、アプリの色を変更できるテーマ機能を実装していきます。
第9回目の「App.jsの作成」あたりで、テーマ機能の追加・設定をすでにしています。
今回は、各テーマのカラーをtheme.jsに追加していくのと、ユーザーがテーマを選べるようにしていきます！
GitHubでソースコードを管理しています！
最初から見る↓
【1】React Nativeでテキストエディタを作ってみる！【下調べ編】
前回を見る↓
【12】React Nativeでテキストエディタを作ってみる！【ファイルシステム編】
目次
出来上がりのデモ
テーマ変更機能できました😊
— Katatumuri (@Katatumuri_nyan) July 9, 2021
もうちょっとテーマ追加していきます。 pic.twitter.com/cPpnBOuHLw
↑テーマ機能の完成版ははこんな感じです！
ユーザーがテーマを選べるようにする
まずは、↑このようにユーザーがテーマを選べるようにします。
テーマ情報は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にピッカーを導入しました。
Android↑
iPad↓
↑こんな感じで表示されました！
const [appTheme, setAppTheme] = useState("Night")
↑既に作成しているこのステートを更新することで、テーマを変更できるようになりました。
テーマ更新🥰 pic.twitter.com/ZYbuz6STnP
— Katatumuri (@Katatumuri_nyan) July 9, 2021
↑デモ動画
ピッカーのデザイン変更
ピッカーのデザインを変更していきます。
思ってたよりAndroidとiPadでピッカーが違いすぎるので、適度にやっていきます！
↑Android
iPad↓
スタイルの適応範囲が制限されているみたいだったので、このくらいにしておきました。
選んだテーマを保存する
テーマを選ぶだけだと、アプリを閉じたらテーマが保存されないので、テーマを保存していきます。
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)
}
↑こんな感じでテーマ情報を上書きすることができました。
テーマの色を拾っていく。
↑これだけテーマを作ったので、色をtheme.jsに追加していきます。
プレビュー画面の色設定
右側のプレビュー画面の色を、テーマカラーと一緒にするか、白黒にするか選べるようにします。
その設定も設定ファイルに保存しておきます！
↑このように、選べるようにしました。
コードはテーマ選択の時と変わらないので省略します。
次はファイルのインポート・エクスポートをしていきます！
↓続き
【14】React Nativeでテキストエディタを作ってみる！【インポート・エクスポート編】