【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ファイルを切り分けて

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

いいかもしれません。