React Nativeでボタンを自在に操る！スタイルプロップ、内蔵スタイルオブジェクト、Styled Components徹底解説

React Nativeで動的なスタイルを作成する方法

React Nativeは、モバイルアプリを効率的に開発できるクロスプラットフォーム開発フレームワークです。CSSと同様に、React Nativeでもスタイルを使ってUIをデザインすることができます。しかし、React Nativeでは、単に静的なスタイルを定義するだけでなく、動的にスタイルを変化させることも可能です。

動的なスタイルは、ユーザーの入力やアプリの状態に応じて、UIをリアルタイムに更新するのに役立ちます。例えば、ボタンが押された時に背景色を変更したり、スクロール量に応じてヘッダーの透明度を調整したりといったことが可能です。

動的なスタイルを作成する方法

React Nativeで動的なスタイルを作成するには、主に以下の3つの方法があります。

1. スタイルプロップを使用する
2. 内蔵スタイルオブジェクトを使用する
3. スタイルシートライブラリを使用する

スタイルプロップは、コンポーネントにスタイル情報を直接渡す方法です。最もシンプルで基本的な方法ですが、複雑なスタイルを定義するには不向きです。

const MyComponent = (props) => {
  const { isActive } = props;
  const buttonStyles = {
    backgroundColor: isActive ? 'blue' : 'gray',
  };

  return (
    <Button style={buttonStyles}>
      {props.children}
    </Button>
  );
};

内蔵スタイルオブジェクトは、JavaScriptオブジェクトを使ってスタイルを定義する方法です。スタイルプロップよりも柔軟性が高く、複雑なスタイルを定義するのに適しています。

const MyComponent = (props) => {
  const { isActive } = props;
  const buttonStyles = StyleSheet.create({
    button: {
      backgroundColor: 'gray',
      padding: 10,
      borderRadius: 5,
    },
    activeButton: {
      backgroundColor: 'blue',
    },
  });

  return (
    <Button style={[buttonStyles.button, isActive ? buttonStyles.activeButton : {}]}>
      {props.children}
    </Button>
  );
};

スタイルシートライブラリは、CSSライクな構文を使ってスタイルを定義できるライブラリです。Styled ComponentsやEmotionなどが有名です。これらのライブラリを使用すると、より洗練されたスタイルを記述することができます。

Styled Components

import styled from 'styled-components';

const MyButton = styled.Button`
  background-color: ${props => props.isActive ? 'blue' : 'gray'};
  padding: 10px;
  border-radius: 5px;
`;

const MyComponent = () => {
  return (
    <MyButton isActive={true}>
      Click me!
    </MyButton>
  );
};

Emotion

import { css } from '@emotion/react';

const buttonStyles = css`
  background-color: ${props => props.isActive ? 'blue' : 'gray'};
  padding: 10px;
  border-radius: 5px;
`;

const MyComponent = () => {
  return (
    <Button className={buttonStyles}>
      Click me!
    </Button>
  );
};

React Nativeで動的なスタイルを作成するには、様々な方法があります。それぞれの方法にはメリットとデメリットがあるので、状況に合わせて最適な方法を選択することが重要です。

上記以外にも、React Nativeで動的なスタイルを作成する方法はいくつかあります。例えば、アニメーションライブラリを使用したり、カスタムフックを作成したりすることもできます。

以下は、React Nativeで動的なスタイルを作成するサンプルコードです。

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

const MyComponent = (props) => {
  const { isActive } = props;
  const buttonStyles = {
    backgroundColor: isActive ? 'blue' : 'gray',
  };

  return (
    <View>
      <Button style={buttonStyles}>
        {props.children}
      </Button>
    </View>
  );
};

export default MyComponent;

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

const MyComponent = (props) => {
  const { isActive } = props;
  const buttonStyles = StyleSheet.create({
    button: {
      backgroundColor: 'gray',
      padding: 10,
      borderRadius: 5,
    },
    activeButton: {
      backgroundColor: 'blue',
    },
  });

  return (
    <View>
      <Button style={[buttonStyles.button, isActive ? buttonStyles.activeButton : {}]}>
        {props.children}
      </Button>
    </View>
  );
};

export default MyComponent;

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

const MyButton = styled.Button`
  background-color: ${props => props.isActive ? 'blue' : 'gray'};
  padding: 10px;
  border-radius: 5px;
`;

const MyComponent = () => {
  return (
    <View>
      <MyButton isActive={true}>
        Click me!
      </MyButton>
    </View>
  );
};

export default MyComponent;

Emotionを使用する

import React from 'react';
import { View, Button } from 'react-native';
import { css } from '@emotion/react';

const buttonStyles = css`
  background-color: ${props => props.isActive ? 'blue' : 'gray'};
  padding: 10px;
  border-radius: 5px;
`;

const MyComponent = () => {
  return (
    <View>
      <Button className={buttonStyles}>
        Click me!
      </Button>
    </View>
  );
};

export default MyComponent;

説明

これらのサンプルコードは、いずれもボタンの背景色を動的に変化させるコードです。

• スタイルプロップを使用する
• 内蔵スタイルオブジェクトを使用する
  • StyleSheet.create() 関数を使用して、スタイルオブジェクトを作成します。
  • button スタイルと activeButton スタイルを定義します。
  • isActive プロパティによって、ボタンに button スタイルと activeButton スタイルを適用します。
• Styled Componentsを使用する
  • styled.Button コンポーネントを使用して、ボタンコンポーネントを作成します。

これらのサンプルコードはあくまでも一例であり、状況に合わせて様々な方法で動的なスタイルを作成することができます。

補足

• これらのサンプルコードは、React Native 0.67.0 を使用しています。
• 上記のコードを実行するには、Node.js と React Native がインストールされている必要があります。
• 詳細については、React Native ドキュメントを参照してください。

React Nativeで動的なスタイルを作成するその他の方法

上記で紹介した3つの方法以外にも、React Nativeで動的なスタイルを作成する方法はいくつかあります。以下に、いくつか例を挙げます。

アニメーションライブラリを使用すると、ボタンの背景色を滑らかに変化させるなどのアニメーションを作成することができます。

例:

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

const MyComponent = () => {
  const [isActive, setIsActive] = React.useState(false);
  const backgroundColor = Animated.color(isActive ? 'blue' : 'gray');

  return (
    <View>
      <Animated.View style={{ backgroundColor }}>
        <Button onPress={() => setIsActive(!isActive)}>
          {props.children}
        </Button>
      </Animated.View>
    </View>
  );
};

export default MyComponent;

カスタムフックを使用すると、動的なスタイルを再利用しやすいコードを書くことができます。

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

const useButtonStyles = (isActive) => {
  const backgroundColor = isActive ? 'blue' : 'gray';
  return {
    backgroundColor,
  };
};

const MyComponent = () => {
  const [isActive, setIsActive] = React.useState(false);
  const buttonStyles = useButtonStyles(isActive);

  return (
    <View>
      <Button style={buttonStyles} onPress={() => setIsActive(!isActive)}>
        {props.children}
      </Button>
    </View>
  );
};

export default MyComponent;

ジェスチャーステートを使用すると、ユーザーのジェスチャーに応じてスタイルを変化させることができます。

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

const MyComponent = () => {
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (event, gestureState) => {
      const backgroundColor = Math.min(1, gestureState.dx / 100) * 0.8 + 0.2;
      setButtonStyles({ backgroundColor });
    },
    onPanResponderRelease: () => {
      setButtonStyles({ backgroundColor: 'gray' });
    },
  });

  const [buttonStyles, setButtonStyles] = React.useState({ backgroundColor: 'gray' });

  return (
    <View>
      <Button style={buttonStyles} {...panResponder.panHandlers}>
        {props.children}
      </Button>
    </View>
  );
};

export default MyComponent;

ネイティブモジュールを使用すると、プラットフォーム固有のスタイル機能にアクセスすることができます。

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

const MyComponent = () => {
  const { StatusBarManager } = NativeModules;

  const backgroundColor = Platform.OS === 'ios'
    ? StatusBarManager.statusBarStyle === 'light-content'
      ? 'black'
      : 'white'
    : 'gray';

  return (
    <View>
      <Button style={{ backgroundColor }}>
        {props.children}
      </Button>
    </View>
  );
};

export default MyComponent;