PIYO - Tech & Life -

ReactNative

Nuxt.jsと同等ESLint設定を他のプロジェクトでも使う

先日書いたようにVisual Studio Codeを使い始めました。 https://blog.piyo.tech/posts/2019-03-05-setup-vscode/ いざ手持ちのReact NativeプロジェクトをVS Codeで開いて編集し保存したら自動的にESLintによるフォーマットが効いてくれた！ のですが…、保存のたびに結果が変わる挙動をしてしまいました。かわるというか …

社内用アプリのReact Nativeを0.58にアップグレード

RNアプリを0.50.3から0.58.3に一気に上げました。 社内アプリのReact Nativeのバージョンを上げてる — Hiromasa Ohno（ぴー） (@pi_cha_n) February 6, 2019 案外苦労しませんでしたが、ちょっとだけ困ったのでメモ。 TypeError: undefined is not a function (near …

React NativeアプリでAndroidでstartsWith関数の実行結果が異なる（っぽい）のにハマった

React Nativeのアプリで、ある文字列が特定の文字列で始まる場合に何かするみたいな、↓こんなif文を書いていたんですが、Androidの実機で動かないケースに遭遇しました。 if(text.startsWith('xxxx')) { // do something } 正確にいうと、実機デバッグ中Remote Debuggerにつないでいるときは想定通りの動きをするものの …

Bootstrap4のspacing用のクラスみたいなのをReact Nativeでも使いたい

Bootstrap4のmarginとかpadding用のユーティリティクラスが手軽でつい使ってしまいます。 これね。mt-3みたいなやつ。 https://getbootstrap.com/docs/4.1/utilities/spacing/ Webの場合メリットとデメリットがあるのはわかります。スタイル直書きと対して変わらないし意味を持たないのでもしかしたらデメリットが多いかも。

React NativeでHTMLを表示するHTMLViewに対しての理解が進んだ

以前こちらの記事でMarkdownをHTML化して表示するための方法をいくつか紹介しました。 https://blog.piyo.tech/posts/2018-07-12-markdown-on-react-native/ その中で開発中のアプリで使っているHTMLViewはいけてないですね、という話を書きました。 が、色々調べているうちに、ちょっと使い方が間違っていたのではということに気がつい …

Android PでReact Nativeアプリの逆方向のリストのスクロールが引っかかる感じになった

自社でも使っているツールのReact Native製のアプリを使っている同僚から、Androidを上げたらスクロールがおかしいよという連絡があったので調査をしました。 問題が起こるのは、逆方向のリストを表示している箇所です。逆方向のリストとは画面一番したが要素の先頭で、上にスクロールしていくと追加読み込みが起こるという、チャットのような画面のことです。