2018年7月10日火曜日

React Native(Expo)を使って、Twitterのいいねを検索するためのアプリを作ったので諸々晒す的なお話

  • このエントリーをはてなブックマークに追加

Twitterの公式検索の機能ではいいねを検索する機能はないわけで。
過去に自分がどういういいねをしていたのか、またいいねしたんだけどいつのツイートをいいねしたんだっけ?みたいなことってあるわけで。
そんなときに検索ができるアプリがあったらいいな〜と思って作ってみた。

ちなみにReact NativeでExpoを使って実装。
さらに自分が作ったreact-native-simple-twitterを使っている。
ということで今日はExpoのどういうコンポーネントやらを使ってたり、npmのパッケージを使っているかどうか的なお話をば。

react-navigationをv1からv2に更新した的なお話

  • このエントリーをはてなブックマークに追加

react-navigationをv1からv2へとバージョンアップした的なお話。
v1からv2に移行するにあたって色々と変更する点があったので、それらを雑多なメモ的な感じで。

2018年6月1日金曜日

react-nativeでWebView内のCookieをjsのコードのみで削除するには的なお話

  • このエントリーをはてなブックマークに追加

そもそもWebViewのCookieを削除する場面ってある?と思ったんだけども、最近instagramのAPIを簡単に扱うためのライブラリを作った。
watanabeyu/react-native-simple-instagram
これはまぁ以前作ったwatanabeyu/react-native-simple-twitterとほぼ同じ的なもので、
とりあえずreact-native linkとか必要なしにjsだけでinstagramのAPIを叩けるようにしましょう的な。
Twitterと違ってInstagramのAPIはかなり実装は楽だった。

ただ問題になるのはAPIを使うためにTwitterもだしInstagramもだけど、ログインをする必要がある。
Twitterの場合は都度このアカウントでよいですか?みたいな表示を出してくれるけど、Instagramの場合はそういうアラートも出ないのでアカウントの切り替えが出来ない。
Cookieが残っているからというのが理由なんだけど、WebViewのメソッドだったりでCookieを削除するようなものはなかったりする。
ちなみにiOSだったらNSHTTPCookieStorageに保存されているのでここをいじらなければいけない。
ということで今日はnativeをbridgeしなくてもWebViewのCookieを削除するには的なお話をば。

2018年5月16日水曜日

React Nativeでreact-native-swiperを使わずに、indexが変更された際に何かしたい的なお話

  • このエントリーをはてなブックマークに追加

React Nativeで代表的なライブラリであるreact-native-swiper
簡単にcarouselというかpagerみたいなことができるんだけども、厄介なことにchildrenの要素が増えたときにactiveIndexが0に変更されてしまう。
ちなみにScrollViewだとそういうpagerみたいなのを行うのは少々手間が折れる部分があるのでいかんせんし難いところではあるが、
FlatListでonViewableItemsChangedを使うことで実は対応できる。
さらにonViewableItemsChangedを使うことで見えてないViewを一時的に消すとかそういうこともできるわけで。

ということで今日はそのお話をば。

2018年4月27日金曜日

react native0.54.2以降でTextInputでonChangeTextを使うと日本語変換ができなくなる的なお話

  • このエントリーをはてなブックマークに追加

まんまタイトル通り。
https://github.com/facebook/react-native/pull/18456
valueもしくはdefaultValueとして値を入れてかつonChangeTextを使うと日本語の変換ができなくなる。
なんか望ましくない文字を入れたくないためのアップデートらしい。

とりあえずこのままだと困るので、今日はこれを対処するお話をば。

2018年4月11日水曜日

reactjsでes6で作ったnpmパッケージはimportできないので要注意的なお話

  • このエントリーをはてなブックマークに追加

タイトル通り。
React Nativeだとそんなことないような気がするんだけど、reactjsだとダメっていう。
class propertiesとかそういうところとかで引っかかる。
ちなみにnpmパッケージじゃなくて自分でes6のcomponentを作ってimportをしたときはbabelの設定をちゃんとしていればOK的な。

とりあえず理由はわからないわけではないんだけど、面倒なので、今日はちゃんとnpm publishする前に確認をしよう的なお話をば。

2018年4月3日火曜日

golangでURL画像のwidthとheightを知りたい的なお話

  • このエントリーをはてなブックマークに追加

たまにそういうときがあってもおかしくないかと。
ということで今日はこういう感じでいけばいいらしいというお話をば。

2018年3月30日金曜日

React16.3.0のざっくりまとめ的なお話

  • このエントリーをはてなブックマークに追加

発表されたので自分用に簡単なまとめ。

2018年3月23日金曜日

electron + parcel + react + react-router-dom + node-sass + reduxなボイラープレートを作った的なお話

  • このエントリーをはてなブックマークに追加

最近管理画面を作るにしても公開する必要ってあるんだっけ?みたいな感じに思ってて。
特に自分たちしか見ることがないのであればわざわざwebで公開する必要ないよね的な。
ってことでMacアプリ作っちゃえばいいじゃん的な。
そうなるとswiftで書いても面倒だしな…ってことでelectronを使うことに。
特に最近React Nativeばかり書いているからかなりモダンな記法ばかりやってたのもあり、
それにwebpackで設定書くのも面倒だなぁと思ってparcelを使おうかと。

ってことでと今日はparcel使いつつのelectronでbabelもりもりなお話をば。

2018年3月3日土曜日

expoでQRコードのデコードをdetachしてreact-native linkせずに行うためのコンポーネントを公開した的なお話

  • このエントリーをはてなブックマークに追加

QRコードをデコードしたいときってあるわけで。
Expoにしても何にしてもカメラでQRコードを読み取ってデコードするっていうのは標準で搭載されているんだけど、
スクショした画像とかQRコードの画像からデコードをするというライブラリは少ないわけで。
さらにいうとそれらって結局のところreact-native linkする必要とかあったりで、NativeModulesで書かれてることが多い。
となるとExpoで使えないから困るよねっていうことになるわけで。

なのでdetachしたりとかExpoを諦める必要のないQRデコードライブラリを作りました的な。
ということで今回はそのライブラリを作るに当たってかなり疲労した部分があるのでそれについてのお話をば。

Adsense