NativeBaseはいいぞって話
7909 ワード
株式会社FUNEEでCONCRUを開発中のどんちゃんです。
ReactNative(Expo)を1から学習して1年数ヶ月。
プロダクトの開発が落ち着いてきたので、スキマ時間を使って、CONCRU開発で学んだノウハウや、テクニックを小出しにしていこうと思います。
今回はCONCRUで使っているUIライブラリ、NativeBase を紹介します。
歴史
元々あったライブラリですが、昨年v3系にメジャーアップデートし、大変身を遂げました。
下記記事でも取り上げられてます。
使ってみた所感
- 独自のオレオレStyleをかなり減らした
- テーマの切り替えがカンタン！
- Utility Firstなので、TailwindとかBootStrap(僕は4系しか知りませんが)みたいな感覚で使える
- コミュニティが活発、海外では流行りつつあるが日本語の情報が少ない
- ドキュメントがわかりやすい(だから記事が少ない？)
- Figmaのデザインキットもある(弊社での大きな採用理由)
使用例
例えば、stateの変更により、アプリ全体のテーマを変更するコード。テーマ変更機能ですね。
import React from 'react'
import Navigator from '@/MainApp/RootNavigator'
import { NativeBaseProvider } from 'native-base'
import { useTheme } from '@/hooks/useTheme'
import { themes } from '@/theme'
export const MainApp = () => {
const theme = useTheme()
return (
<NativeBaseProvider theme={themes[theme]}>
<Navigator />
</NativeBaseProvider>
)
}
テーマはこんな感じで定義してます。デフォルトのテーマをExtendする感じですね。
import { extendTheme, theme } from 'native-base'
const themeA = extendTheme({
colors: {
primary: theme.colors.purple,
},
config: {
initialColorMode: 'light',
},
})
const themeB = extendTheme({
colors: {
primary: theme.colors.blue,
},
config: {
initialColorMode: 'light',
},
})
const themeC = extendTheme({
colors: {
primary: theme.colors.green,
},
config: {
initialColorMode: 'light',
},
})
/** テーマセット */
export const themes = {
themeA,
themeB,
themeC,
}
使っていきたいコンポーネントがたくさん！
いま絶賛NativeBaseにリプレイスを進めているので、StyleSheet APIを使ったスパゲッティStyleを撲滅中です。
現場からは以上です。
是非ドキュメントを読んでみてください。
Author And Source
この問題について(NativeBaseはいいぞって話), 我々は、より多くの情報をここで見つけました https://zenn.dev/daichi_suyama/articles/1a44fedf2d1bf9著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol