YUYA YAMAKI

YUYA YAMAKI

  • 2024年版「基礎から学ぶReact Native入門」

    基礎から学ぶReact Native入門 電子書籍｜翔泳社の本 (shoeisha.co.jp) 「基礎から学ぶReact Native入門」は2021年に出版された本です。いろいろと古くなっている部分があるので2024年現在は記載内容そのままの手順で進めることはできません。差分をここに記載した記事、全5記事です。

react-native-reanimatedのuseAnimatedStyleでtransformOriginを指定するとiOSでアプリが落ちる

ReactNative + Expoでアニメーションを開始しようとするとアプリが落ちたり、アプリが起動してもiOSネイティブのエラー（NSError）が発生する現象が発生しました。エラーは以下のようなものです。 Androidで実行すると何の問題もありません。 エラーでググってみてもさっぱり原因がわからないので、コードを少しずつコメントアウトしていったところuseAnimatedStyleでtransformOriginを指定していることが問題であることがわかりました。

YUYA YAMAKI

    • 出先でReact Native + Expoをデバッグする

      普段カフェでパソコン開くなんていう機会はほとんどないんですが、たまたまそんな機会に恵まれて「あれ？」ってなったお話です。 Androidのエミュレーターが入っていたので、出先でもそれで実行結果を確認できるだろうくらいに思っていたのですが、普通にやってもつながりません。 エミュレーターもWi-Fi環境が必要なんですね。それでググってみたところ、tunnelなどのオプションも見つけましたが、 npx expo start --offline このofflineでいけました。

      YUYA YAMAKI

      • ライブラリの選択で参考になるもの - React Native

        React Nativeに限らないですが、Web関連の技術、特にフロントエンドは流行の移り変わりが早く、ちょっと前まで主流だったものも今はそうでもないということが少なくないと思います。なので、ググって一番上に出てきたものでOKということもなかなか難しい感じです。 例えば、「"react native" 多言語対応」でググった結果は こんな感じで、一番目は「react-i18next」、二番目は「i18n-js」と、それぞれ異なるライブラリを使った方法が紹介されています。 こ

        YUYA YAMAKI

        • iOSとAndroidでrotateXの結果が異なる- React Native

          React Nativeで、Transformの中のrotateXを使って文字列を変形させて表示しようとしていたところ、同じコードでも結果が異なっていることに気がつきました。 調べてみると以下のページがヒット。 どうもバグとして修正はされていないようですが、Perspective（奥行き）を指定しない場合の動作が一致していないだけで、Perspecitiveを指定すれば同じ結果になるようです。 サンプルコード<View style={[styles.box, {trans

          YUYA YAMAKI

        react-native-reanimatedのuseAnimatedStyleでtransformOriginを指定するとiOSでアプリが落ちる

        YUYA YAMAKI

        マガジン

        • 2024年版「基礎から学ぶReact Native入門」
          5本

        記事

          React NativeのFlexboxはいくつかのプロパティの既定値が異なっている

          背景React NativeでFlexboxを使っていてどうも動きがおかしくて思った通りにならないと思ったら、いくつかのプロパティの既定値が異なっていたというお話。 違いの例通常（Web） React Native flex-directionプロパティ通常（Web） React Native React Nativeの説明とあり、既定値が異なるプロパティは以下の通り flexDirection: column alignContent: flex-start

          YUYA YAMAKI

          React NativeのFlexboxはいくつかのプロパティの既定値が異なっている

          YUYA YAMAKI

          GitHub CopilotのGetting startedにある動画の人間翻訳 その１

          Getting started with GitHub Copilot GitHub Copliotを有効化すると上記のページに誘導されますが、そこに３つの動画があるので勉強がてらその翻訳をここに書きます。 Get to know GitHub Copilot in VS Code and be productive IMMEDIATELYGitHub Copilotが使えるようになりました。おめでとうございます。 Copilotは、おそらく不可能と思われていた方法で、開

          YUYA YAMAKI

          GitHub CopilotのGetting startedにある動画の人間翻訳 その１

          YUYA YAMAKI

          Expo Routerはファイル名がケバブケースじゃないとエラーになる

          経緯最初React Navigationを使って画面遷移部分を構築したのですが、ファイルベースのルーティングが楽そうですし、Expo使っているならExpo Routerの方がいいのかなぁということでExpo Routerに変更することにしました。 そうしたところ以下のようなエラーが表示されました。 このエラーでググってみても有用な情報を探すことができなかったのですが、いろいろどこがおかしいのかを探っていると、原因はファイル名にあることが分かりました。 解決方法これが元のフ

          YUYA YAMAKI

          Expo Routerはファイル名がケバブケースじゃないとエラーになる

          YUYA YAMAKI

          「Fatal Fury」がなぜ「餓狼伝説」なのか

          初めての対戦格闘ゲーム餓狼伝説は自分が初めてプレイした対戦格闘ゲーム。2ではなく餓狼伝説1である。近所のエンドーチェーン（スーパー）のゲームコーナーに大量のMVSが設置されていた。 当時インターネットがまだ使える環境としてなかったけど、ゲーム雑誌などで知ったのか、英語タイトルが「Fatal Fury」であることはそのころから知っていた。 ただ、いかんせん当時の私は英語に興味がなかったどころか、英語という教科が嫌いでしかなかったので、その意味を調べようともしなかった。読み方も「

          YUYA YAMAKI

          「Fatal Fury」がなぜ「餓狼伝説」なのか

          YUYA YAMAKI

          React Native Expo 画面を横向きに固定する

          参考にしたのは以下の公式とブログ。 expo-screen-orientationのインストール。 npx expo install expo-screen-orientation app.jsonへの追記 { "expo": { "ios": { "requireFullScreen": true }, "plugins": [ [ "expo-screen-orientation", {

          YUYA YAMAKI

          React Native Expo 画面を横向きに固定する

          YUYA YAMAKI

          React NativeのStatusBarとExpo StatusBar

          本題の前にWindowsのStatusBar Windowsの世界でStatusBarといえばこれです。 このウィンドウの下部にあるやつ。 iOSとAndroidでのStatusBar しかし、iOSとAndroidの世界ではこれだということを初めて知りました。 本題こちらがReact NativeのStatusBar。 こちらはExpo StatusBar。 上記のページに以下のように書かれている。 大体同じような感じだけど、currentHeight（An

          YUYA YAMAKI

          React NativeのStatusBarとExpo StatusBar

          YUYA YAMAKI

          MacでReact Nativeのコードを書くまでに必要だった準備

          HomebrewのインストールnodebrewとNode.jsのインストールVisual Studio CodeのインストールターミナルからVisual Studio Codeを起動できるようにするHomebrewからインストールした場合は不要みたいだけど、インストーラーを使った場合には必要。 Watchmanexpo startで「Error: EMFILE: too many open files - React Native CLI」というエラーが出たので この記事

          YUYA YAMAKI

          MacでReact Nativeのコードを書くまでに必要だった準備

          YUYA YAMAKI

          LogicoolのJISキーボードがUS配列に認識される場合の解決方法

          MacBook AirにLogicoolの外部キーボードを接続したところ、どうやってもUS配列で認識されてしまう。それを解決するのに少し苦労したので、その方法を書いておきます。 今回の問題が発生した環境MacBook Air 15インチ、M3、2024 Intel Macからユーザープロファイルを移行していた環境 logicool MX Mechanical Mini 同名のキーボードでfor Macがあるがこれは無印のWindows用 USBのドングルはMacBo

          YUYA YAMAKI

          LogicoolのJISキーボードがUS配列に認識される場合の解決方法

          YUYA YAMAKI

          「基礎から学ぶReact Native入門」で2024年に入門した記録 その５

          P.137 リスト11.1 src/ComposeSecreen.js繰り返しになりますが、 import React from 'react'; の行は、React 17以降のバージョンでは不要です。 P.138 リスト11.3 src/MainScreen.jsこちらも繰り返しになるが、 import { useNavigation } from '@react-navigation/native'; 上記の行は記載が不要。 export const Mai

          YUYA YAMAKI

          「基礎から学ぶReact Native入門」で2024年に入門した記録 その５

          YUYA YAMAKI

          M3 MacBook AirでHomebrewのインストールに苦労した話

          エラーが出てHomebrewがインストールできない新しいMacBookになってHomebrewをインストールしようとしたら、以下のようなエラーが出てインストールできない。おそらくIntel MacからApplie Silicon Macに移行したことが関係しているんじゃないかと。解決に結構時間かかったので、同じ問題に遭遇した人のためにここにメモしておきます。 Error: Cannot install in Homebrew on ARM processor in Inte

          YUYA YAMAKI

          M3 MacBook AirでHomebrewのインストールに苦労した話

          YUYA YAMAKI

          「基礎から学ぶReact Native入門」で2024年に入門した記録 その４

          P.112 依存ライブラリをインストールコマンドが"expo install"から始まっているが、古い“Global Expo CLI”はインストールしていないのでこのコマンドは使えない。なので以下のコマンドを使用する。 npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react

          YUYA YAMAKI

          「基礎から学ぶReact Native入門」で2024年に入門した記録 その４

          YUYA YAMAKI

          「基礎から学ぶReact Native入門」で2024年に入門した記録 その３

          P.84 リスト7.1 widthとheightを指定したコンポーネントこのコード自体は動作するが、図7.3にあるようにY座標がノッチの下からとならず、時計表示に重なって表示される。 これはどうもSafeAreaContextというのを使うとよさそうなので、使ってみる。 ExpoでのSafeAreaViewでデバイス別の余白設定 (zenn.dev) npx expo install react-native-safe-area-context import { Saf

          YUYA YAMAKI

          「基礎から学ぶReact Native入門」で2024年に入門した記録 その３

          YUYA YAMAKI