React Native: Dark theme-г Context API ашиглан хэрхэн хэрэгжүүлэх вэ?

Сүүлийн үеийн хамгийн том ui дизайн трендүүдийн нэг бол яалт ч гүй Dark Mode билээ. Dark mode ашиглах сонирхолтой хэрэглэгчид маш их байгаа учир Android, iOS үйлдлийн системээс эхлээд өргөн хэрэглэгддэг Facebook, Twitter, Youtube, Instagram г.м аппууд одоо бүгд л dark mode-той болсон байна. Dark mode үнэнч хэрэглэгчдийн хувьд бүх л аппыг dark mode сонголттой байгаасай гэж хүсдэг.

Үйлдлийн системээс эхлээд бүх аппуудаа dark mode-р ашиглаж байгаад dark mode-гүй апп нээх үед

За тэгвэл хэрэглэгчдийнхээ хүсэлд нийцсэн dark theme-г хэрэгжүүлэхэд ямар шаардлагууд хангасан байх ёстой талаар авч үзье.

Үндсэн шаардлагууд

1. Light/Dark гэсэн төлөвийг-г аль ч component-с ашиглаж болохоор global байдлаар хадгалах.
2. Төлөв солигдсон үед бүх component шинээр render хийх
3. Төлвийн мэдээлэлтэй хамт өнгөний кодууд хадгалах. Theme солигдох үед мэдээж тухайн theme-ны өнгөнүүдийг аваад шинээр style зааж өгөх шаардлагатай болно.
4. Style үүсгэхдээ өнгөнүүдээ хувьсагчаар дамжуулж авдаг байх. Жишээ нь theme.colors.text г.м
5. Хэрэглэгчийн үйлдлийн системийн Light/Dark төлөвийг авах. Мэдээж хэрэглэгч үйлдлийн системээ dark mode дээр тохируулсан байвал түүнийх нь дагуу dark mode-г үндсэн(default) сонголт болгох нь зөв.
6. Хэрэглэгчийн сонгосон төлөвийг нь persistent storage-д хадгалах. Хэрэглэгч дараагийн удаа аппаа нээх үед өмнө сонгосон theme-г нь ашиглана.

Дээрх шаардлагуудыг хангасан dark theme-г React Context болон AsyncStorage ашиглан хэрэгжүүлэе.

Алхам 1

Өнгөнүүдээ themes.js гэсэн файл үүсгэж хадгалах

Алхам 2

Theme-н төлөвийг Context үүсгэж хадгалах. Context ашигласнаар аль ч component-с хандах, өөрчлөх боломжтой дундын төлөв(state) үүснэ. Энэхүү дундын төлөв нь өөрчлөгдөхөд тухайн төлөвийг ашигладаг бүх component-ууд шинээр render хийгддэг учир бидний шаардлагыг бүрэн хангаж байгаа юм.

6 мөрөнд үүсгэсэн ThemeContext-г бусад component дээр context-н төлвийг оруулж ирэхэд ашиглана.

11 мөрөнд ThemeProvider үүсгэж байна. Context ашиглахын тулд энэхүү Provider-г component-уудынхаа эцэг соmponent буюу High Order Component болгож өгөх шаардлагатай байдаг.

14 мөрөнд байгаа useColorScheme нь системийн dark/light mode-г авч байна. Хуучин react-native хувилбар дээр useColorScheme-г ашиглахын тулд react-native-appearance санг суулгах шаардлагатай болно.

16 мөрөнд AsyncStorage-с хэрэглэгчийн сонгосон theme байгаа эсэхийг шалгаж, байвал тэр сонголтыг нь тохируулж өгч байна. Энэхүү хэсэг нь апп шинээр нээх бүрт ажиллана.

25 мөрөнд хэрэглэгчийн сонгосон theme-г AsyncStorage(Persistent Storage)-д мөн давхар хадгалж байна. AsyncStorage-д хадгалснаар дараагийн удаа апп нээхэд сонгосон theme-г хэвээр байлгах боломжтой болно.

Алхам 3

Theme-н өнгөнүүдийг ашиглаад style үүсгэх. theme.colors.background, theme.colors.text гэх зэрэг өнгөнүүд нь theme-нээсээ шалтгаалаад өөр байна гэсэн үг.

Алхам 4

Context-г ашиглахын тулд Provider-г нь бүх component-нхоо эцэг буюу High Order Component болгох ёстой. Үүнийг App.js дээрээ оруулж ирж ашиглана.

ингэснээр ThemeContextProvider-н child component-ууд нь ThemeContext-г ашиглах боломжтой болж байгаа юм.

Алхам 5

Үндсэн дэлгэцдээ theme болон style-аа оруулж ирж ашиглах. мөн хэрэглэгчид theme солих switch-г харуулах.

үүнтэй адил бусад component-ууд дээрээ ингэж ашиглана.

Demo

Дээрх алхамуудын дагуу хийсэн демо апп маань ингэж харагдана. Ойлгомжтой энгийн байлгах үүднээс react-native-н demo project дээр бага зэрэг өөрчлөлт хийгээд кодоо орууллаа.

Github link энэ линкээр татаж аваад харж болно шүү.

Дүгнэлт

Энэхүү нийтлэлээрээ react-native дээр React-н Context ашиглан dark/light theme хэрхэн хэрэгжүүлэх талаар бичлээ. Миний бодлоор redux, mobx зэрэг state management сан ашигладаггүй аппын хувьд Context ашиглах нь хамгийн зөв шийдэл гэж боддог. Context-г ашиглаад сурчвал дараа нь иймэрхүү дундын global state хадгалах шаардлагатай зүйлүүдийг тун хялбар хийх боломжтой болох учир заавал сураарай гэж зөвлөе.