カスタマイズについて

NativeBaseでは、アプリ内の色や文字の大きさなどを共通で定義することで、統一的なアプリデザイン、開発をするための聞こうとしてテーマという機構が用意されています。

Customize

前提ライブラリ

本記事は、「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」を適用しています）

App.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>
    );
  }
}

変更できる項目

以下にカスタマイズできる項目が説明されています。

Theme variables Cheat sheet

上記を参考にサンプルのvariableを変更するか、コピーして独自のvariabeを作成、アプリで指定することにより独自のテーマを使用することができます。

ビジュアルエディタ

variable は以下のサービスを使用して表示を確認しながら作ることもできます。

https://nativebase.io/customizer/

ただし、元となるvariableがmaterialだけだったり、変更できない部分があったりと、使いにくい部分が見受けられましたので、現時点では、表示箇所の確認用にとどめておくのが良いのかなと思っています。

リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseNativebaseTheme