react-native-elementsでtheme機能を使う
17489 ワード
１つのアプリをデザインを変えて使い回す需要があったためテーマ機能を調査。
詳しい使い方はこちら。
使い方
親コンポーネントを<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],
}
Author And Source
この問題について(react-native-elementsでtheme機能を使う), 我々は、より多くの情報をここで見つけました https://qiita.com/zaburo/items/b85a3cc7e10be27aee2f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .