styled-components

2019-06-05

react-nativeスタイリングのためstyled-componentsライブラリを活用する方法について説明します。

リアクトネイティブ(React Native)プロジェクト生成

typescriptを適用したプロジェクトで進めます。RNへtypescriptを適用する方法は以前のブログをご参考してください。

styled-componentsライブラリをインストール

styled-componentsライブラリとtypescriptを連動するためのライブラリをインストールします。

npm install --save styled-components
npm install --save-dev @types/styled-components babel-plugin-styled-components
  • styled-components: styled-componentsライブラリです。
  • @types/styled-components: typescriptへ必要なstyled-componentsのタイプです。
  • babel-plugin-styled-components: 必須ではないけど、デバッグする時、class名を分かりやすくしてくれます。babel.config.jsへ下記のように設定します。
module.exports = {
  ...
  plugins: ['babel-plugin-styled-components'],
};

使い方

styled-componentsは全般的なスタイルを管理するためthemeの機能を提供してます。themeを使う方法と基本的使い方を説明します。

基本的使い方

  • 基本的なスタイル適用する方法
// src/App.tsx
...
import styled from 'styled-components/native';
...
const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5fcff;
`;
const MainText = styled.Text`
  font-size: 20;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Container>
        <MainText>Hello world</MainText>
      </Container>
    );
  }
}
  • propsを使って動的にスタイルを適用する方法
// src/App.tsx
...
import styled from 'styled-components/native';
...

interface IContainerProps {
  background: string;
}

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props:IContainerProps) => props.background ? props.background : 'white'};
`;
const MainText = styled.Text`
  font-size: 20;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Container background="red">
        <MainText>Hello world</MainText>
      </Container>
    );
  }
}

Themeを使う方法

公式サイトにはtypescriptを使ってthemeを使う方法が詳しく書いております。

公式サイトと参考サイトを見たらstyled-componentsを使うためには相対パスを使う問題点があります。

それで私たちは公式サイトの方式ではなく、”propsを使って動的にスタイルを適用する方法”を応用して使ってます。

// src/@types/index.d.ts
interface ITheme {
  color: {
    white: string;
    black: string;
  };
  fonts: {
    normal: string;
  };
}
// src/Theme.tsx
export default {
  color: {
    white: '#FFFFFF',
    black: '#000000',
  },
  fonts: {
    normal: '14px',
  },
};
...
// src/App.tsx
import { ThemeProvider } from 'styled-components';
import styled from 'styled-components/native';
import Theme from './Theme';
...

interface IContainerPorps {
  theme?: ITheme;
}

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props:IContainerProps) => props.theme && props.theme.color.black};
`;
const MainText = styled.Text`
  font-size: 20;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <ThemeProvider theme={Theme}>
        <Container>
          <MainText>Hello world</MainText>
        </Container>
      </ThemeProvider>
    );
  }
}

参考

Buy me a coffeeBuy me a coffee
Posts