ReactNativeにActionSheetを実装してみた

ActionSheetとは?

この下から出てきてるやつ

f:id:rskull:20170628001833p:plain

RN本体でサポートしてくれてはいるが、iOSの標準機能なので iOS用のコンポーネントになってる。

ActionSheetIOS

うーん…同じコードで両方対応したいですね…

react-native-action-sheet

そんなときはコレ

github.com

いい感じにiOSAndroid両方対応してた

Androidは(多分)見慣れたポップアップみたいな感じで表示される

expoでサンプルコードが公開されてるので、実機とアプリがあれば簡単に確認できて便利

※ expoについては省略

今回はexpoじゃなくて、通常通り react-native init app の流れからの組み込みを想定してる

組み込む

まずはプロジェクトのルートでパッケージをインストールする

$ npm install @expo/react-native-action-sheet

サンプルコードをほぼそのまま使って動くかやってみると

import React, { Component } from 'react';

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {
  ActionSheetProvider,
  connectActionSheet,
} from '@expo/react-native-action-sheet';

class app extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ActionSheetProvider>
          <ActionSheet />
        </ActionSheetProvider>
      </View>
    );
  }
}

@connectActionSheet class ActionSheet extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{ marginBottom: 30 }}>
          <Text style={{ textAlign: 'center' }}>
            Hello! This is a simple example app to demonstrate
            @exponent/react-native-action-sheet.
          </Text>
        </View>

        <TouchableOpacity
          style={{ backgroundColor: "#000" }}
          onPress={this._onOpenActionSheet}
        >
          <Text style={{ fontSize: 15, color: '#fff' }}>Open action sheet</Text>
        </TouchableOpacity>
      </View>
    );
  }

  _onOpenActionSheet = () => {
    // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
    let options = ['Delete', 'Save', 'Cancel'];
    let destructiveButtonIndex = 0;
    let cancelButtonIndex = 2;
    this.props.showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        destructiveButtonIndex,
      },
      buttonIndex => {
        // Do something here depending on the button index selected
      }
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

デフォルトだと、ES2016のDecoratorがBabelで有効になってないのでエラーがでます

> 23 | @connectActionSheet class App extends React.Component {
     | ^
  24 |   render() {
  25 |     return (
  26 |       <View style={styles.container}>

こんな感じのエラー

Decoratorを使えるようにする

プラグインを入れて

$ npm install --save babel-plugin-transform-decorators-legacy

.babelrc に設定を付け加える

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

参考:Using ES2016 Decorators in React Native - Modus Create

npmインストールとかしたらプロンプトで動いてるやつ再起動してください Ctrl+Cで止めてプロジェクトルートで $ react-native start すれば動き出します

動かしてみる

iOS

f:id:rskull:20170627235432g:plain

Android

f:id:rskull:20170628000432g:plain

なんかDeprecated警告出てたけど、そのうち修正してくれるだろう…

Flwotypeに対応

Flowtype使ってるひとはチェック引っかかるので .flwoconfig に以下の内容を設定すれば大丈夫です

[options]
esproposal.decorators=ignore

参考:ES7 decorator support or a way to ignore the error · Issue #606 · facebook/flow · GitHub

感想

いい感じ ٩( ‘ω’ )و

新しいMBPにXcodeの開発環境を移行したとき証明書周りでハマった

タイトルの通り。

開発ビルドとリリースビルドの証明書がうまいこと設定できない問題はよくあるみたい。

いくつかハマった点をメモする

中間証明書がなかった

【注意】Apple Worldwide Developer Relations中間証明書の期限切れ - Qiita

まずはAppleから中間証明書というものを落として登録する必要がある。

そういえば昔そんな作業したなーって感じだった。

旧開発機から証明書をインポート

このあたりを参考にした

トラブルシューティング

Mobile Dev. (iPhone + Objcetive C) » 2台目以降のMacで実機テストをする方法

旧開発機のKeychain AccessからExportして.p12ファイルを作って それを共有するだけでOKだった。

プッシュ通知のための証明書を作成する過程でも色々ファイルを作成するので

どれが必要でどれがなんの役割なのかごっちゃになってたけど、今回の作業でスッキリした。

旧開発機からのインポートが無理な場合(ざっと)

手元の本番証明書が、MBP移行のタイミングでちょうど期限切れしてて、問題に気づくのが遅れた…

けっきょく証明書を作り直す必要がりそう。

  • 証明書の要求ファイル(CSR)を作成
  • DeveloperコンソールのCertificationsで追加ボタンを押す
  • 必要な種類を選んで先程作ったCSRをアップして証明書を発行
  • ダウンロードした証明書をクリックして追加
  • プロビジョニングプロファイルを編集して新しく追加されたCertificationsを選択して生成
  • ダウンロードして取り込む
  • これでXcodeみたら有効になってた

最初に証明書を作る時と同じような手順です。

ついでに期限が切れそうだった本番証明書も更新した。

もしかして普通一緒に更新するもの?

とりあえず問題なく更新して環境も移行できました。

iOSプッシュ通知用証明書の更新方法 - Qiita

細かい部分は探せばだいたい情報はあるから省く

MBP買ったから初期設定メモする

アプリ

ターミナル

環境構築

$ curl -sS rskull.com/rc/install | sh

デフォルトのシェルを変更

$ chsh -s /bin/zsh

rbenv & ruby

$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

rubyをインストー

rbenv install 2.4.1

バージョンを指定

rbenv global 2.4.1

Homebrew

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

cocoapods

$ gem install cocoapods

tmux

$ brew install tmux

tmux-powerline で使うフォント https://github.com/fncll/vimstuff/raw/master/powerline-fonts/SourceCodePro-Regular-Powerline.otf

php

$ brew install php71
$ brew install php71-igbinary
$ brew install php71-intl
$ brew install php71-mcrypt
$ brew install php71-opcache
$ brew install php71-redis
export PATH="$(brew --prefix homebrew/php/php70)/bin:$PATH"

Composer

$ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer

nodebrew & node

$ curl -L git.io/nodebrew | perl - setup
export PATH=$HOME/.nodebrew/current/bin:$PATH

nodeをインストー

$ nodebrew install v6.11.0
$ nodebew use v6.11.0

yarn

$ brew install yarn

ReactNative関連

コマンド

$ npm install -g react-native-cli

依存するコマンド

$ brew install watchman
$ brew install flow

Reat Native Debegger (デバッグツール)

https://github.com/jhen0409/react-native-debugger

$ brew update && brew cask install react-native-debugger

Androidの開発環境

http://facebook.github.io/react-native/docs/getting-started.html

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/tools/bin:$PATH

Golang

https://golang.org/dl/

export GOPATH=$HOME/work/go
export GOROOT=/usr/local/go
export PATH=$GOPATH/bin:$GOROOT/bin:$PATH

LayoutAnimation 使うと楽しい

ReactNativeで LayoutAnimation を使うと、要素が消えたり表示したりする時に

勝手にいい感じのアニメーションを付けてくれるから便利

import {
  LayoutAnimation,
} from 'react-native';

ボタンを押すとメニューが出てくる仕様があったとして、それにアニメーションを付けたい場合、 トリガーになる onPress() なんかの一番最初に LayoutAnimation.spring() を書くだけで勝手にアニメーションしてくれます。

spring() はバネみたいなアニメーションで、他にはeaseInEaseOut ()linear () がデフォルトで用意されています。

サクッと確認したい場合は、ここを見るとウェブ上で実行できるサンプルがあるので、それを編集すれば良さそうです。

http://facebook.github.io/react-native/releases/0.45/docs/animations.html#layoutanimation-api

自分で動きをカスタマイズも出来ます。

こんな感じ

componentWillUpdate()LayoutAnimation を実行すれば、とにかく画面が変更される度にアニメーションがかかるようになります。

LayoutAnimation は難しい設定なしで、かってにアニメーションをいい感じにしてくれる良い子です。

ぜひ使ってみて下さい。

ドキュメント http://facebook.github.io/react-native/releases/0.45/docs/layoutanimation.html#layoutanimation

久しぶりに書く

この先も生き残れるエンジニアになるにはアウトプットを…

みたいな記事に毎回脅迫されるから何かしら書いていこうと思い立った。

緑のサイトは見るけど書くのは気が乗らないからブログにする。

学生の頃のほうがアウトプットしてたんだけど

新卒で入った会社に忙殺されて久しく忘れていた。

やっていきですね

AutoLoader ver.1.0

なにこれ

コーディング中、HTMLやCSSなどのファイルを変更したとき
自動でブラウザをリロードしてくれるブックマークレットです!
もちろんオフラインでも使うことができます!

対応ブラウザ

Chrome / FireFox(バージョンによる)/ Safari

使い方


f:id:rskull:20130222225251p:plain

1.まずは下のリングをブックマークバーに登録します。
2.クリックすると小ウィンドウが出てくるので、ボックスに監視したいファイルをドロップ!
3.監視ファイルを変更すると、親ウィンドウが自動でリロードされます!
4.監視を辞めたいときは、小ウィンドウを閉じるかリストをクリックすればOKです!

Bookmarklet


↓リンクをドラッグしてブックマークバーに登録!
AutoLoader


まとめ


自動ローディング機能はIDEによってついてる場合もありますが、そんなのないよ!って人に。
とくにデュアルディスプレイだったりすると、すごく楽です。
ブックマークレットのリンクを押すタイミングは、自動でローディングをさせたいindex.htmlなどの
ファイルを開いた状態で押して下さい!
FireFoxだとバージョンによって動かない場合もあります!
IEはFileAPIが対応しないと使えないっぽいです。

HTML5の独自属性を取得する。

HTML5になってからタグに独自の属性を設定できるようになりました!
厳密に言うとdata属性らしいですが

例えば

<div id="hoge" data-hoge-id="12345"></div>

のようなかんじです。
data- に続いて独自の属性を定義します。

この属性をJavaScriptで取得するとき、普通に取得すると
そんなもんねーよ!って怒られます
なのでこの方法だとダメです。

document.getElementById('hoge').data-hoge-id;
//取得できない(hogeIdでもダメ)

取得するにはいくつか方法があります。
1つはgetAttributeを使う方法と、新しく入ったdatasetを使う方法です。
とりあえず後者だけで

document.getElementById('hoge').dataset.hogeId; //12345

これで取得できます。
ポイントは data- は省略して、CSSを操作するときの様に
ハイフンは省いて次の文字を大文字にします。

最後にjQueryから取得する方法です。
この場合はとくにハイフン省略したりだとかしなくていいっぽいです
ちなみにこれもいくつか方法があるらしいですが一番無難なものを紹介

$('#hoge').attr('data-hoge-id'); //12345

こんなかんじです
何か間違ってる所あったら添削お願いですっ