カスタマイズについて
NativeBaseでは、アプリ内の色や文字の大きさなどを共通で定義することで、統一的なアプリデザイン、開発をするための聞こうとしてテーマという機構が用意されています。
前提ライブラリ
本記事は、「NativeBase」の導入を前提としています。一からプロジェクトを作成する場合には、以下の記事を参考に環境作成してください。
【React Native】NativeBase導入
テーマを使用するには
NativeBaseをインストールするときのメッセージが出力されますが、以下のコマンドを実行することでテーマが使用可能となります。
$ node node_modules/native-base/ejectTheme.js
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ NativeBase theme has been copied at /Users/daisuke/Dev/ReactNative/theme/native-base-theme │
│ Here's how to theme your app │
│ │
│ import getTheme from './native-base-theme/components'; │
│ export default class ThemeExample extends Component { │
│ render() { │
│ return ( │
│ <StyleProvider style={getTheme()}> │
│ <Container> │
│ <Content> │
│ ... │
│ </Content> │
│ </Container> │
│ </StyleProvider> │
│ ); │
│ } │
│ │
│ Head over to the docs (http://docs.nativebase.io/Customize.html#Customize) for detailed information on customization │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
これにより以下のファイルが展開されます。
$ tree native-base-theme
native-base-theme
├── components
│ ├── Badge.js
│ ├── Body.js
│ ├── Button.js
│ ├── Card.js
│ ├── CardItem.js
│ ├── CheckBox.js
│ ├── Container.js
│ ├── Content.js
│ ├── Fab.js
│ ├── Footer.js
│ ├── FooterTab.js
│ ├── Form.js
│ ├── H1.js
│ ├── H2.js
│ ├── H3.js
│ ├── Header.js
│ ├── Icon.js
│ ├── Input.js
│ ├── InputGroup.js
│ ├── Item.js
│ ├── Label.js
│ ├── Left.js
│ ├── ListItem.js
│ ├── Picker.android.js
│ ├── Picker.ios.js
│ ├── Picker.js
│ ├── Radio.js
│ ├── Right.js
│ ├── Segment.js
│ ├── Separator.js
│ ├── Spinner.js
│ ├── Subtitle.js
│ ├── SwipeRow.js
│ ├── Switch.js
│ ├── Tab.js
│ ├── TabBar.js
│ ├── TabContainer.js
│ ├── TabHeading.js
│ ├── Text.js
│ ├── Textarea.js
│ ├── Thumbnail.js
│ ├── Title.js
│ ├── Toast.js
│ ├── View.js
│ └── index.js
└── variables
├── commonColor.js
├── material.js
└── platform.js
サンプルvariableの説明
展開されたファイルのvariablesフォルダにテーマの「variable」が格納されています。それぞれ以下のような性格を持っています。
CommonColor.js
ほとんどの部分で両方のプラットフォームで共通の配色が使用されていますが、プラットフォーム固有のアイコン、フォント、コンポーネントがあればそれに従うというユースケースに最適です。
material.js
両方のプラットフォームにマテリアルデザインが必要な場合もあります。誰もがそのファンではありませんが、GoogleはiOSでマテリアルデザインを使用しています。このテーマは100％有効な素材ではありませんが、現時点でも使用できます。
platform.js
NativeBaseのデフォルトのテーマ。アプリが実行されるプラットフォームの設計、つまりiOSとAndroidのプラットフォーム固有のテーマにマッピングされます。
テーマの適用
アプリのソースでを「StyleProvider」で包むことで、テーマが適用されます。（下記では「CommonColor.js」を適用しています）
import React, {Component} from 'react';
import { StyleProvider, Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
import getTheme from './native-base-theme/components';
import commonColor from './native-base-theme/variables/commonColor';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<StyleProvider style={getTheme(commonColor)}>
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>タイトル</Title>
</Body>
<Right>
<Button transparent>
<Icon name='menu' />
</Button>
</Right>
</Header>
</Container>
</StyleProvider>
);
}
}
変更できる項目
以下にカスタマイズできる項目が説明されています。
上記を参考にサンプルのvariableを変更するか、コピーして独自のvariabeを作成、アプリで指定することにより独自のテーマを使用することができます。
ビジュアルエディタ
variable は以下のサービスを使用して表示を確認しながら作ることもできます。
https://nativebase.io/customizer/
ただし、元となるvariableがmaterialだけだったり、変更できない部分があったりと、使いにくい部分が見受けられましたので、現時点では、表示箇所の確認用にとどめておくのが良いのかなと思っています。
リポジトリ
本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseNativebaseTheme