Sign in Subscribe

Topic

react

A collection of 3 issues

WSL上でReact Gatsbyを使うときに sharp というライブラリがエラーを吐く

環境移行しようとしてWSL2上にgatsbyのプロジェクトをチェックアウトしてきたところ、 yarnコマンド実行中にエラー。どうやら sharpというライブラリが要求するpythonライブラリが足りていないようだ。 error /home/nekoha/gatsby/node_modules/sharp: Command failed. ライブラリのインストール足りないなら、追加でOK。 sudo apt install libvips-dev -y 参考: npm install sharpで失敗するときの対処 - Ouvill のブログ

FirebaseでSPAやりたいときの設定

SPA をおいてみたけど、 index.htmlからしか遷移できない！ってときに。しばらく転送されてなかった React(Gatsby)でサイトリニューアルしてからというもの、どんどん落ちる検索ランキング。なんでかなーと思ったら、/index.html 以外、URLでの直接リンクで表示できないようになっていた。原因は Firebase の設定 SPA の場合、ブラウザのアドレス欄の表示が変わってもすべて /index.html で表示されています。そのまま /blog/post/react/react-on-firebase/ を表示させようとしても、そこには html ファイルがないため何も表示できません。以前は nuxt.js でジェネレートしていたので大丈夫だったんですね。この問題は、Firebase 側の設定ですべての HTML リクエストは /index.html を返してもらう必要があります。リダイレクトではなく、フォワードのイメージですね。設定は Firebase.json

React NativeとWebViewでいつでも双方向通信する

最近仕事で React を使うようになりました。で、React Native アプリ(以下 RN)と WebView(以下 WV)の双方向でメッセージをやり取りしたかった。公式ドキュメントの奥深く、Communicating between JS and Nativeに書いてある。というわけで、いつでも双方向通信を実現してみた。動作確認 * react-native: 0.63.2 * react-native-webview: 10.8.3 ReactNative 側のソース react-nativeのWebViewはディスコンらしい。ので react-native-webviewのWebViewを使います。 sourceプロパティで Web ページを埋め込むのですが、localhostじゃ動きません。アドレスを指定しましょう。動作検証するためにはこのアドレスが RN 側の端末で解決できる必要があります。 import React, { useState } from 'react' import