【ReactNative開発】グローバルのスタイルを定義する

こんばんは。今日は、ReactNativeのスタイルに関するお話です。

それでは参ります。

実現したいこと

グローバルのスタイルを定義したい。

最近、開発しているアプリが大きくなってきて、コードの重複が目立つようになってきました。
特に煩雑に思えてきたのが、スタイルの管理です。ボタンのスタイルなど、グローバルで共通のスタイルを使えるとコード管理もしやすくなるなぁと思いましたので、どうやって実現できるか調べてみました。

実現方法

こちらのStack Overflowが参考になりました。

https://stackoverflow.com/questions/30853178/react-native-global-styles

グローバルのスタイルを定義したファイルを作成し、

import { StyleSheet } from 'react-native';

module.exports = StyleSheet.create({
    alwaysred: {
        backgroundColor: 'red',
        height: 100,
        width: 100,
    },
});

これを各コンポーネントで呼び出せばOKです。

const s = require('./style');

・・・・
<View style={s.alwaysred} ></View>

短いですが、今日はここまで・・！

（おまけ）ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。