1. YutamaKotaro

    Posted

    YutamaKotaro
Changes in title
+【React-Native】StyleSheetについて
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,266 @@
+# はじめに
+React Native では stylesにスタイルを定義してかいているのですが、最近、Webの方でもReact Nativeと同じようにCSS in JSで書きだしてから、React Nativeを書く時にStyleSheet.createを忘れてしまう事案が発生しているので戒めに書きます。
+あまり大した内容でなくすみません・・・。
+
+```js:React.js,ReactNativeでもこう書いてしまっていた・・・
+const styles = {
+ container: {
+ marginLeft: '1rem',
+ backgroundColor: COLORS.BG_TEAL,
+ },
+};
+class App extends Component {
+・・・・
+```
+
+```js:本来ReactNativeではこう書く
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: COLORS.BG_TEAL,
+ },
+});
+
+class App extends Component {
+・・・
+```
+
+
+## そもそもStyleSheet.createは必要?
+
+動作上は不要です。ですので、StyleSheet.createしなくとも動きますし、しない方がプレーンなオブジェクトで便利だったりしますが・・・・・・。
+
+## StyleSheet.createした方がいいよ!
+StyleSheet.createをすることによって、オブジェクトはidで返るようになります。
+これによってパフォーマンスの向上が見込めるので極力はやっておいた方がよいです。
+
+```js:StyleSheet.createする場合
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+})
+
+console.log(styles.container); // 6 などのプリミティブなnumberが返る
+```
+
+```js:StyleSheet.createしない場合
+const styles = {
+ container: {
+ flex: 1,
+ },
+};
+
+console.log(styles.container); //ちゃんとオブジェクトが返る。{ flex: 1, }
+```
+
+
+## プリミティブからオブジェクトへの復元
+
+こう・・・、数値で返ってこられるとデバッグの時にこれなんやねんってなって困ることがあります。そこでflattenを使うことで元に戻すことができます。
+
+```js
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+})
+
+console.log(styles.container); // 6
+
+const _container = StyleSheet.flatten(styles.container);
+console.log(_container); //{ flex:1, }
+```
+
+ところが
+
+```js
+console.log(Object.getOwnPropertyDescriptor(_container, 'flex'));
+/*
+ configurable:false,
+ enumerable:true
+ value:1
+ writable:false
+*/
+
+```
+
+ディスクプリタをみてみるとwritable: falseになっているため書き換えできませんので要注意です。
+さらにはconfigurableもfalseなので消すこともできません。
+
+## オブジェクトの統合とプロパティの上書き
+
+汎用的なコンポーネントを作成した時には、styleのオーバーライドをしたくなることがあります。
+これはradiumと同じ記法でオーバーライドすることで解決できます。
+ここでもflattenは活躍します(中身を確認する時は・・・)。
+
+```js
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ margin: 30,
+ },
+ _container: {
+ flex: 2,
+ padding: 10,
+ }
+});
+
+console.log(StyleSheet.flatten([styles.container, styles._container]));
+// { flex: 2, margin: 30, padding: 10, }
+```
+
+# convenience properties
+
+他には便利なプロパティも持っています。
+
+## absoluteFill
+
+```js
+console.log(StyleSheet.absoluteFill); // 2
+console.log(StyleSheet.flatten(StyleSheet.absoluteFill));
+/*
+ bottom: 0,
+ left: 0,
+ position: 'absolute',
+ right: 0,
+ top: 0,
+*/
+```
+
+これはプリローダーやモーダルダイアログを出すのに良い感じに動いてくれます。
+
+```js
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ _container: {
+ flex: 2,
+ },
+ overRay: {
+ backgroundColor: 'rgba(0, 0, 0, 0.7)',
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ preloader: {
+ backgroundColor: 'rgba(255, 255, 255, 0.8)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: 200,
+ width: 200,
+ borderRadius: 3,
+ },
+});
+
+
+const App = (props) => (
+ <View style={styles.container}>
+
+ {/* コンテンツ */}
+ <Main {...props} />
+
+ {/* オーバーレイ */}
+ <View style={StyleSheet.absoluteFill} >
+ <View style={styles.overRay} >
+ <View style={styles.preloader}>
+ <Text>ぐるぐる回るやつ</Text>
+ </View>
+ </View>
+ </View>
+ </View>
+);
+```
+
+<img width=300 src="https://qiita-image-store.s3.amazonaws.com/0/121851/bb4aba9e-a920-4b39-6349-a2503c209a4e.png" />
+
+## absoluteFillObject
+
+absoluteFillと中身は同じですがこちらはオブジェクトで返ります。
+
+```js
+console.log(StyleSheet.absoluteFillObject);
+/*
+ bottom: 0,
+ left: 0,
+ position: 'absolute',
+ right: 0,
+ top: 0,
+*/
+
+console.log(
+ Object.getOwnPropertyDescriptor(
+ StyleSheet.absoluteFillObject, 'top'
+ )
+);
+/*
+ configurable:false,
+ enumerable:true
+ value:object,
+ writable:false,
+*/
+```
+
+具体的な使い方としては
+
+```js
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ margin: 30,
+ ...StyleSheet.absoluteFillObject,
+ },
+});
+console.log(StyleSheet.flatten(styles.container));
+
+/*
+ bottom: 0,
+ left: 0,
+ position: 'absolute',
+ right: 0,
+ top: 0,
+ flex: 1,
+ margin: 30,
+*/
+```
+
+となります。
+
+## hairlineWidth
+
+それぞれのプラットフォームでもっとも薄い線を引く時に使える数値が設定されています。
+
+```js:iphone7Plus
+console.log(StyleSheet.hairlineWidth); // 0.3333333
+```
+
+ただし、これは固定値ではなくプラットフォーム依存なので、
+
+|端末|数値|
+|:---|:---|
+|iphone7Plus| 0.333333333|
+|iphone7| 0.5|
+|iphone5| 0.5 |
+| Nexus5x| 0.333333333|
+
+という感じで異なります。
+横幅に依存してるんですかね?
+
+```js
+const styles = StyleSheet.create({
+ _box: {
+ borderColor: '#3C3C3C',
+ borderWidth: StyleSheet.hairlineWidth,
+ },
+});
+```
+という感じで利用することができます。
+
+# 終わりに
+
+以上で終了です!
+CSS風なプロパティなんだーぐらいで納得してしまってあまりStyleSheetやStyleSheet.createを使う意義なども考えてこなかったのでいざこうやって勉強し直してみると意外と便利な機能もあるんだなと勉強になりました。
+しかし、実際はStyleSheet.createさえ覚えとけばだいたい大丈夫だと思います!
+StyleSheet.createルーチンすぎて、忘れやすいですが是非ともお忘れなくつけていただけますと幸いです。
+