LayoutAnimationをAndroidでも動くようにする

前にこんな記事を書いたが

Androidでは動かなくて調べた

rskull.hateblo.jp

import { UIManager } from 'react-native';

constructor() {
    super()

    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true)
  }

こうするだけ

ドキュメントにもちゃんと書いてあった

facebook.github.io

ReactNativeでglamorous-nativeとstyled-componentsを使ってみた

JavaScript ReactNative

ReactNativeでスタイルを書きやすくしてくれるライブラリがある

styled-comopnentsはスター数が１万を超えの人気ライブラリ

主にウェブの方で使われてるがReactNativeにも対応してるっぽい

glamorous-nativeは後発でstyled-componentsなどに影響を受けて出てきたライブラリ

同じようなことが出来る

なぜ使うのか？

  • スタイルに名前を付けなくて良くなる
  • コンポーネントにどのスタイルがかかっているか一目瞭然
  • 簡単にスタイルを設定出来るようになる

などでしょうか

ちょっとスタイルが違うだけのコンポーネントが乱立して雑にならないように気をつける

どちらが良いのか？

まず普通にスタイルを適用する書き方だとこうなる（一部省略）

import { Text, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    color: 'red'
  }
})

<Text style={styles.text}>Hello!</Text>

styled-components

次にstyled-componentsだとこうなる

import styled from 'styled-components/native'

const MyText = styled.Text`
  fontSize: 20,
  color: red
`

<MyText >Hello!</MyText>

ウェブの時みたいに props は渡せないみたい

glamorous-native

glamorous-nativeだとインラインでpropsにスタイル名を渡す形式で書ける

import glamorous, { Text } from 'glamorous-native'

<Text color="red" fontSize={20}>

または、前もって定義して使うことも可能

import glamorous from 'glamorous-native'

const MyText = glamorous.text({
  fontSize: 20,
  color: 'red'
})

<MyText >Hello!</MyText>

styled-componentsだとスタイルのキャッシュが効いてない？

こんな記事があった

Why you don’t need Styled-Components in a React Native app.

普通に書いた時の styles はプレーンなオブジェクトでも動くが

StyleSheet.create はスタイルをキャッシュして再利用してるので必要らしい

だがstyled-componentsはキャッシュしてくれてないらしくglamorous-nativeはそこらへんをよしなにやってくれている

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    color: 'red'
  }
})

// ↓↓ これでも動くがキャッシュされない

const styles = {
  text: {
    fontSize: 20,
    color: 'red'
  }
}

glamorous-nativeは他にも色々機能がある

既存のコンポーネントのスタイルを拡張して使う

const MyTextComp = glamorous(MyText)({ fontStyle: 'italic' })

<MyTextComp>Hello!</MyTextComp>

propsを自分で操る

const MyText = glamorous.text(
  {
    fontSize: 20,
    color: 'red'
  },
  (props) => ({
    fontWeight: props.noBold ? 'normal' : 'bold'
  })
)

<MyText>Hello bold!</MyText>
<MyText noBold>Hello noBold!</MyText>

このあたりはREADMEに詳しく例が乗ってるので助かる

GitHub - robinpowered/glamorous-native: React Native component styling solved💄

その他、アニメーションと合わせて使う時のサンプルと

ナイトモードなどのテーマを実装したい時のサンプルがリポジトリにあるので参考になる

https://github.com/robinpowered/glamorous-native/tree/master/examples

結論

glamorous-nativeが良さそう

github.com

適当に書いたコード↓

https://github.com/rskull/glamorous-native-example/blob/master/App.js

参考リンク

Why you don’t need Styled-Components in a React Native app.

https://github.com/styled-components/styled-components

https://github.com/robinpowered/glamorous-native

ポートフォリオサイト作り直した

仕事でもずっとReaectNativeばかりで、まじめにフロント書いてないので

勉強がてらポートフォリオサイト作り直した

f:id:rskull:20170917021816p:plain

http://rskull.com/#/works

環境構築

$ yarn add react react-dom react-router-dom styled-components

Webpack + Babel 関連

$ yarn add webpack webpack-dev-server extract-text-webpack-plugin babel-loader babel-polyfill babel-preset-react babel-preset-es2015 babel-preset-state-2 babel-core  --dev

CSS周り

$ yarn add css-loader cssnano  postcss-easy-loader postcss-loader style-loader --dev
$ yarn add normalize.css

キーバインドするために入れた

$ yarn add  keycode react-keydown

Decorator使うのに必要

$ yarn add babel-plugin-transform-decorators-legacy --dev

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'src');

const extractCSS = new ExtractTextPlugin('style.css');

const config = {
  entry: [APP_DIR + '/index.js', APP_DIR + '/style.css'],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: 'public',
    port: 8080,
  },
  plugins: [
    extractCSS
  ],
};

module.exports = config;

シンプルな構成

webpack-dev-server を実行すればサーバーが立ち上がる

作ってみて

styled-components で雑に書いてしまった感じ

小さいサイトなのでReduxも入れてない

react-keydownでキーイベント使えるようになったのはいいけど、画面の端っことか関係無いところクリックするとイベントが解除されるのどうにかしたかった

SSRがめんどくさかったからHashでルーティングするようにしてある

次はもうちょっと大きいサイトをかっちり書いてみる