React Nativeでアプリにスタイルを追加する方法｜StyleSheetとインラインスタイルの使い方を徹底解説

React Nativeでは、WebのようにCSSファイルを直接読み込むのではなく、JavaScriptのオブジェクト形式でスタイルを定義します。アプリにスタイリングを追加する方法は、主に以下の2つです。

• StyleSheetコンポーネントを使う
• インラインスタイルを使う

方法1：StyleSheetコンポーネントを使う

React NativeのStyleSheetコンポーネントは、スタイルを一箇所にまとめて管理できる非常に便利な仕組みです。コードの可読性が向上するだけでなく、スタイルの検証やパフォーマンスの最適化も行われるため、実際の開発現場ではこちらの方法が推奨されています。

まず、react-nativeからStyleSheetをインポートします。

import { StyleSheet } from 'react-native';

続いて、StyleSheet.create()メソッドに、オブジェクト形式でスタイルを定義していきます。

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        margin: 10,
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    }
});

作成したスタイルは、各コンポーネントのstyleプロパティに渡すだけで簡単に適用できます。

<View style={styles.container}></View>

それでは、StyleSheetを使ってFlatListコンポーネントをスタイリングする具体例を見てみましょう。

例1：FlatListをStyleSheetで装飾する

このサンプルでは、isTitleフラグがtrueの項目（カテゴリ見出し）を太字・赤色で表示し、それ以外の通常項目をグレーで表示するように条件分岐しています。

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                { name: "Javascript Frameworks", isTitle: true },
                { name: "Angular", isTitle: false },
                { name: "ReactJS", isTitle: false },
                { name: "VueJS", isTitle: false },
                { name: "ReactNative", isTitle: false },
                { name: "PHP Frameworks", isTitle: true },
                { name: "Laravel", isTitle: false },
                { name: "CodeIgniter", isTitle: false },
                { name: "CakePHP", isTitle: false },
                { name: "Symfony", isTitle: false }
            ],
            stickyHeaderIndices: []
        };
    }
    renderItem = ({ item }) => {
        return (
            <View style={styles.item}>
                <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >
                    {item.name}
                </Text>
            </View>
        );
    };
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem}
                    keyExtractor={item => item.name}
                    stickyHeaderIndices={this.state.stickyHeaderIndices}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        margin: 10,
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    }
});

出力結果

方法2：インラインスタイルを使う

もうひとつの方法が、styleプロパティにスタイルオブジェクトを直接記述するインラインスタイルです。少しだけスタイルを当てたい場合には手軽で便利ですが、記述が増えるとコードが読みにくくなり、保守性も下がります。そのため、規模の大きな開発ではStyleSheetの利用が推奨されます。

例2：Buttonにインラインスタイルを適用する

以下は、Buttonコンポーネントを画面中央に配置し、タップするとアラートを表示するシンプルな例です。

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
    return (
        <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <Button
                title="Click Me"
                color="#9C27B0"
                onPress={() => Alert.alert('Testing Button for React Native ')}
            />
        </View>
    );
}

export default App;

出力結果

まとめ

ちょっとした調整や試作にはインラインスタイルでも十分ですが、本格的なアプリ開発ではStyleSheetコンポーネントでスタイルを一元管理するのがベストプラクティスです。コードの可読性・保守性が大きく向上し、チーム開発でも一貫したデザインを保ちやすくなります。まずはStyleSheetの使い方に慣れておきましょう。