react nativeでstyled-componentsを使いたい

## styled-componentsとは
[公式サイト](https://www.styled-components.com)
javascriptでstyleが書ける便利なやつ
こういうのをCSS in JSというらしい
同じようなものに[emotion](https://emotion.sh)などがある
どっちを使うか悩んだけど今回はstyled-componentsを使ってみる

## 使い方
前提としてreact nativeの環境があること
作者はreact native cliを使ってる
まずは準備

```shell
$ npm install --save-dev styled-components
```
準備完了。
実際に書いていく


<details><summary>styled-componentsを使う前(クリックで展開)</summary>
<div>
StyleSheetなどを使って書いてるだけ

```react:App.js
import React from 'react'
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native'

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.center}>
        <TouchableOpacity style={styles.button}>
          <Text style={{ color: 'white', fontWeight: 'bold' }}>赤いボタン</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5fcff',
  },
  button: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 15,
    borderRadius: 20,
    backgroundColor: '#E8483B',
    width: 150,
    height: 50
  }
})
```

</div>
</details>

### styled-componentsで書く

```react:App.js
import React from 'react'
import styled from 'styled-components/native'
import { css } from 'styled-components'

export default class App extends React.Component{
  render() {
    return (
      <CenterView>
        <StyleBtn>
          <Text>赤いボタン</Text>
        </StyleBtn>
      </CenterView>
    )
  }
}

// styled component
const center = css`
  justify-content: center;
  align-items: center;
`
const CenterView = styled.View`
  flex: 1;
  ${center};
  background-color: #f5fcff;
`
const StyleBtn = styled.TouchableOpacity`
  flex-direction: row;
  ${center};
  margin-top: 15;
  border-radius: 20;
  background-color: #E8483B;
  width: 150;
  height: 50;
`
const Text = styled.Text`
  color: white;
  font-weight: bold;
`
```
`center`のように共通のstyleをmixinで定義することができる

実行結果
<img width="375" alt="Simulator Screen Shot - iPhone 8 - 2019-04-12 at 10.35.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191992/d8be943d-40d1-488f-0e11-2747af932304.png">



### propsを使う

```React:App.js

/* 省略 */

export default class App extends React.Component{
  render() {
    return (
      <CenterView>
        <StyleBtn color="red">
          <Text>赤いボタン</Text>
        </StyleBtn>
        <StyleBtn color="blue">
          <Text>青いボタン</Text>
        </StyleBtn>
        <StyleBtn color="green">
          <Text>緑のボタン</Text>
        </StyleBtn>
      </CenterView>
    )
  }
}

// styled component
const center = css`
  justify-content: center;
  align-items: center;
`
const CenterView = styled.View`
  flex: 1;
  ${center};
  background-color: #f5fcff;
`
const StyleBtn = styled.TouchableOpacity`
  flex-direction: row;
  ${center};
  margin-top: 15;
  border-radius: 20;
  background-color: ${props.color};
  width: 150;
  height: 50;
`
const Text = styled.Text`
  color: white;
  font-weight: bold;
`
```

↑のようにStyleBtnのpropsのcolorでbackground-colorを指定することもできる

実行結果
<img width="375" alt="Simulator Screen Shot - iPhone 8 - 2019-04-12 at 10.37.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191992/e54fd8b7-5377-bffc-a25e-d47adbc496fb.png">

## まとめ
とくべつな知識がなくても問題なさそうなので導入しやすい
CSSそのものの記述ができるのがラク
jsxが綺麗になりそう