Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

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

使い方

親コンポーネントを<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],
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?