作成中のマストドンクライアントアプリの1つの機能が完成したので実機で活用したいという思いが生まれ、apkを作成することにした。
最初のビルドを作成するを参考にして進めていき、無事にapkを作成することに成功した。
EAS CLIをインストール
ドキュメントが充実しているので、問題なくできるだろうと踏んでいたのだが、最初で壁にぶつかった。
というコマンドでEAS CLIをインストールするのだが、なぜうまくインストールされない。
なんかVoltaの権限でうまく入らなかったので、
を管理者権限で実行したら成功した。
npm install -g eas-cliではシステムのPATHにあるデフォルトのnpmを使うけど、"C:\\Program Files\\Volta\\npm.exe" install -g…
Expoでreact nativeのアプリを作成する時、インストール時のディレクトリ構成で+not-found.tsxとかいう謎のファイルがあった。たぶんというか確実に404ページではあるんだろうけれど、+が付いている。
Expoアプリのファイルにある「+」の意味
Not found routesのように公式には、
Expo
Router は、404 のルートを処理するために使用される特別なファイル +not-found.tsxを提供します。このルート ファイルは、ネストされたレベルからのすべての一致しないルートと一致します。
一致しないルートとは、アプリのルーティング構成で定義されていないURLやパスにユーザーがアクセスした場合、そのアクセスに対応するページが見つからない状態のことを言うらしい。
つまり+は404ページのためにあるようなものと言っても過言じゃない？
過…
毎回React
Nativeの環境構築に苦労するので、2024年現時点でしっくりした環境構築の方法を残しておく。
立ち上げるアプリの環境
Expoでアプリを立ち上げる
でプロジェクトを作成すると、
のようにデフォルトで作成される。
しばらくすると
インストールが完了し、buildコマンドが表示される。
npm run startを実行して、ExpoアプリでQRコードを読み込めば、アプリが表示される。
!lサンプルアプリ
Tailwind React Native Classnamesを導入する
react nativeのスタイリングに勉強コストをかけたくないので、Tailwindのように直感的に書けるクラスを採用する。
以前は、NativeWindを使っていたのだけれど、環境構築に手間がかかるので、今回はtwrnc(Tailwind React Native…
過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。
実装に期待する動きは、
上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。
その前提で進めていく。
必要なパッケージをインストールする
インストール後、必要なファイルを作成する。
実装していく
SampleStackScreen.tsxは下記の通りになる。
上記は、SampleとSampleDetailへの遷移について書かれている。
次にこれをタブナビゲーションに適応させる。
App.tsxに
のように記載する。
これでタブ移動でSampleStackScreenが開けるようになった。
そしてここには一覧ページと詳細ページへ…
スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。
ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。
詳細は↓に引用した。
StackNavigator
StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。
【RN】StackとBottomTabNavigatorを組み合わせたサンプル
BottomTabNavigator
…
インストール ESLint
まずはESLintを導入する
React Nativeには基本的に入っているという情報があったが、検索しても引っかからなかったので、上記コマンドでインストールした。
package.jsonを確認し、追加されたことを確認した。
Setting ESLint
次にESLintの設定をしていく。
上記コマンドで設定をスタートする。
まず、なんか追加でインストールしろと言われたのでインストールする。
その後、設定が始まる。
文法をチェックするだけではなく、自動で修正までを行ってもらうことにした。
React Nativeでは主にimport/exportを使うのでJavaScript modules (import/export)を選択して次に進める。
React…
React NativeでTailwind CSSを使用したいということで調べてみると下記２つが該当した。
tailwind-rnとnativewindの比較
スターはtailwind-rnが上回っているけど、活動の多さではnativewindが上回っているようなので、nativewindを採用した。
nativewindの導入
ドキュメントも丁寧なのでなぞって行っていく。
上記コマンドで該当パッケージをインストールする。
次に上記コマンドでtailwind.config.jsを作成し、下記のように記載する。
次にbabel.config.jsを下記のように編集していく。
以上とのことなので、起動してみる。…
TypeScript 関係をインストールする。
上記コマンドでTypeScriptの依存パッケージをインストールする。
完了するとPackage.jsonが
から
に更新される。
tsconfig.jsonを作成する
Appのルートにtsconfig.jsonを作成し、
を記述する。
Tsxファイルの作成と動作確認
最後にJavascriptファイルを*.tsxに変換する。
You should leave the ./index.js entrypoint file as it is otherwise you may run
into an issue when it comes to bundling a production…
過去にReact Nativeの環境構築はしたことがあるが (react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。
Expo Goの利用
モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。 必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。
React Native CLI という環境もあるが、Xcode
またはAndroid Studioになるとのこと。 また初めてであれば環境構築に1時間を要することになる。
ということで、迷うことなくExpo…
前回は環境構築したので、今回のゴールは簡単なアプリっぽいものを立ち上げるまでとする⚔️
sampleProjectという名前のサンプルプロジェクトを作成するために下記コマンドを叩く。
と、沢山の選択肢が示される。
今回は勉強なので、１番しっかりしてそうな「複数の画面遷移ができる状態に」を選択。
結果↓
で、立ち上げてみる。
↑のQRコードをスマホのExpoアプリでスキャンする。
すると、勝手に長いビルドが走り、
↑のようにスマホアプリが立ち上がる⚡
試しに、
↓に変換すると
無事に文字が変更された。
簡単にアプリを立ち上げることができた💪
まずは、Node.js LTSをインストールする必要がある。
私はnode管理ツールにvoltaを使用しているので、
↑を実行する。
Expo CLI のインストールする
正常にインストールできたかは、
↑を実行する。
結果、
できていない...。
ログを辿る限り↓が怪しい。
翻訳すると
Volta ディレクトリに対する正しい権限があることを確認してください。
とのこと...、なるほど🤔?
調べてみるとそそもそもvoltaを使う際は開発者モードを有効にする必要があるとのこと。
会社のPCはvoltaを入れる前に有効にしていたので気が付かなかった。
ということで有効にしたうえで再挑戦。
やって、
やると
無事にインストールできた👍
公式ドキュメントを見ると
インストールが成功すると、まだ Expo…
A nice effect you can you in react native is text shadows. This works exactly as it does in HTML CSS but the setting names are just a little different.
[Code block]
[Image: Screen-Shot-2018-05-20-at-8.54.53-AM.png]
Read the original post with all embeds and interactive content at https://rants.broonix.ca/font-shadows-in-react-native/
I recently had some time to try React Navigation. It's a very nice routing solution to use in your React Native applications. Let's walkthrough a simple example of using React Navigation in a project.
Project Setup
We will use create-react-native-app for this demo. Ensure you have it installed via npm install -g create-react-native-app. We will start by creating a new project:
[Code block]
If…
It's been far too long that I've been saying to myself: "Brooks you really should give React Native a try". So I've whipped up a quick 'how-to' article from my first foray into React Native. In this tutorial, we will create a new React Native project, integrate Redux and deploy on Android and iOS. To keep this first project simple we'll be remaking the Redux counter example.
Getting Started
You…