react-native-elementsでtheme機能を使う

１つのアプリをデザインを変えて使い回す需要があったためテーマ機能を調査。
詳しい使い方はこちら。

使い方

親コンポーネントを<ThemeProvider>で囲む。

App.js

import React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import { Card, Button, ThemeProvider } from 'react-native-elements';

//テーマの設定（色だけじゃくいろいろ設定できる）
const theme = {
    colors: {
        primary: 'green',
        hoge: 'red'
    },
}
//screen読み込み
import Home from './screens/Home';

//ThemeProviderで囲む
export default class App extends React.Component {
    render() {
        return (
            <ThemeProvider theme={theme}>
                <Home />
            </ThemeProvider>
        );
    }
}

子コンポーネントでThemeを利用する

Themeを使うコンポーネントはwithTheme()としてやる必要があるようです。
そうすることで親で設定したthemeがpropsに入ってくるので、それらを利用します。

Home.js

import React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import { Card, Button, ThemeProvider, withTheme, } from 'react-native-elements';

class Home extends React.Component {
    render() {
        console.log(this.props);
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text
                    style={{ color: this.props.theme.colors.hoge }}
                >Home</Text>
                <Button
                    title="push"
                    onPress={() => this.props.updateTheme({
                        colors: {
                            primary: 'pink',
                        }
                    })}
                />
            </View >
        );
    }
}

export default withTheme(Home);

colorsには、プリセットとして以下のようなものがあるようです。
上記での例のようにhoge:'red'等、任意のパラメータも追加できるようです。

interface theme {
  colors: {
    primary;
    secondary;
    grey0;
    grey1;
    grey2;
    grey3;
    grey4;
    grey5;
    greyOutline;
    searchBg;
    success;
    error;
    warning;
    divider;
    platform: {
      ios: {
        primary;
        secondary;
        success;
        error;
        warning;
      };
      android: {
        // Same as ios
      };
    };
  };
}

Themeの優先度

Themeで設定したカラー等はインラインのスタイル設定で上書きされます。

その他

デフォルトのthemeの中身。

Object {
  "children": undefined,
  "replaceTheme": [Function anonymous],
  "theme": Object {
    "colors": Object {
      "disabled": "hsl(208, 8%, 90%)",
      "divider": "#bcbbc1",
      "error": "#ff190c",
      "grey0": "#393e42",
      "grey1": "#43484d",
      "grey2": "#5e6977",
      "grey3": "#86939e",
      "grey4": "#bdc6cf",
      "grey5": "#e1e8ee",
      "greyOutline": "#bbb",
      "hoge": "red",
      "platform": Object {
        "android": Object {
          "error": "#f44336",
          "primary": "#2196f3",
          "secondary": "#9C27B0",
          "success": "#4caf50",
          "warning": "#ffeb3b",
        },
        "ios": Object {
          "error": "#ff3b30",
          "primary": "#007aff",
          "secondary": "#5856d6",
          "success": "#4cd964",
          "warning": "#ffcc00",
        },
      },
      "primary": "#2089dc",
      "searchBg": "#303337",
      "secondary": "#8F0CE8",
      "success": "#52c41a",
      "warning": "#faad14",
    },
  },
  "updateTheme": [Function anonymous],
}