浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react-native】StyleSheet.createを使ってスタイルをオブジェクト化する

react-nativeでスタイルを扱う場合はStyleSheet.createを使用して

オブジェクトをつくっていきます。今までは別ファイルにcssを書いてそのcssとファイルの

要素を繋いで見た目を装飾していたのですが、react-nativeでは完全にスタイルをオブジェクト化

してViewに追加していきます。

 

</pre>
import {StyleSheet} from 'react-native';

const mainStyle = StyleSheet.create({
pageStyle: {
justifyContent: 'center',
flex: 1,
},
});
export default mainStyle;
<pre>

 

importの方法は普通のreactと一緒。スタイルをimportしてオブジェクトと同じように

mainStyle.pageStyleと追加します。

 

</pre>
import React, { Component } from 'react';
import { View} from 'react-native';
import mainStyle from '../../src/style/mainStyle';

class main extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount(){
}
render() {
return (
<View style={mainStyle.pageStyle}>
</View>
);
}
}

export default main;
<pre>

export defaultを忘れるとimportできないので注意

 

基本的にはこんな感じで必要なスタイルのみをimportしてViewに組み込んでいきます。

同じファイル内にスタイルをゴリゴリ書いてしまってもいいのですが、効率を考えてimortファイルを切り分けて

しまったほうが後々メンテナンスする箇所も少なく済むので長期的に考えるとこっちのほうが

いいかもしれません。

  • この記事いいね! (0)