【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に不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。