React Native

スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。 ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。 詳細は↓に引用した。 StackNavigator StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル BottomTabNavigator アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル 実践していく まずは移動するページが欲しいので、 mkdir src mkdir src/screens touch src/screens/Sample.tsx 適当に作成する。 Sample.tsxは import React from "react"; import { ScrollView, View, Text } from "react-native"; const Sample = () => { return ( <ScrollView> <View> <Text>Sample</Text> </View> </ScrollView> ) } export default Sample; こんな感じになる。 ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。 作成したページをApp.tsxで読み込む。 import Sample from './src/screens/Sample' export default function App() { return ( <Sample /> ) } 同様にSample2とかを作成する。...

インストール ESLint まずはESLintを導入する npm install --save-dev eslint React Nativeには基本的に入っているという情報があったが、検索しても引っかからなかったので、上記コマンドでインストールした。 + "eslint": "^8.49.0", package.jsonを確認し、追加されたことを確認した。 Setting ESLint 次にESLintの設定をしていく。 npx eslint --init 上記コマンドで設定をスタートする。 You can also run this command directly using 'npm init @eslint/config'. Need to install the following packages: @eslint/create-config@0.4.6 Ok to proceed? (y) y まず、なんか追加でインストールしろと言われたのでインストールする。 その後、設定が始まる。 ? How would you like to use ESLint? (Use arrow keys) // ESLintをどのように利用しますか？ To check syntax only // 構文のみをチェック To check syntax and find problems // 構文をチェックし問題を見つける > To check syntax, find problems, and enforce code style // 構文をチェックし問題を見つけ、コードスタイルを強制します 文法をチェックするだけではなく、自動で修正までを行ってもらうことにした。...

React NativeでTailwind CSSを使用したいということで調べてみると下記２つが該当した。 tailwind-rnとnativewindの比較 tailwind-rn ☆4.1k nativewind ☆3k スターはtailwind-rnが上回っているけど、活動の多さではnativewindが上回っているようなので、nativewindを採用した。 nativewindの導入 ドキュメントも丁寧なのでなぞって行っていく。 npm i nativewind npm i --dev tailwindcss 上記コマンドで該当パッケージをインストールする。 npx tailwindcss init 次に上記コマンドでtailwind.config.jsを作成し、下記のように記載する。 // tailwind.config.js module.exports = { - content: [], + content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], } <custom directory>は自身のディレクトリに編集する。 次にbabel.config.jsを下記のように編集していく。 // babel.config.js module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], + plugins: ["nativewind/babel"], }; }; 以上とのことなので、起動してみる。 無事に開発環境は動いている。 次にnativewindの記述を反映することができるか確認してみる。 <View style={styles.container}> <Text>Hello World!...

TypeScript 関係をインストールする。 npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 上記コマンドでTypeScriptの依存パッケージをインストールする。 完了するとPackage.jsonが "devDependencies": { "@babel/core": "^7.20.0" }, から "devDependencies": { "@babel/core": "^7.20.0", "@tsconfig/react-native": "^3.0.2", "@types/jest": "^29.5.4", "@types/react": "^18.2.21", "@types/react-test-renderer": "^18.0.1", "typescript": "^5.2.2" }, に更新される。 tsconfig.jsonを作成する Appのルートにtsconfig.jsonを作成し、 { "extends": "@tsconfig/react-native/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 build. と公式に書かれていたが、そもそもindex.jsを見つけることができなかったからドキュメントが古い？ App.tsxに型のない関数を書くとtsエラーが出たので、うまく機能していると思われる。...

過去にReact Nativeの環境構築はしたことがあるが(react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。 Expo Goの利用 モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。 必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。 React Native CLI という環境もあるが、Xcode またはAndroid Studioになるとのこと。 また初めてであれば環境構築に1時間を要することになる。 ということで、迷うことなくExpo Goを採用した。 開発サーバーの起動まではとてもシンプルで下記コマンドを実行する。 npx create-expo-app AwesomeProject cd AwesomeProject npx expo start 既存ディレクトリへの展開 ただ今回はリポジトリ作成済みでディレクトリが存在していたので、 npx create-expo-app $(pwd) 上記コマンドで現ディレクトリにAppを展開した。 そのうえで開発環境PCとエミュレータスマホを同一のWi-Fiに接続し、 npx expo start 上記コマンドで開発サーバーを立ち上げた。 エミュレータスマホでApp.jsに書かれた、Open up App.js to start working on your app!が表示されれば、立ち上げが成功している。 Hello World ! 次に、 <Text>Open up App.js to start working on your app!</Text> を <Text>Hello World!</Text> に変更すれば、当然、Hello World!が表示される。 これでReact Nativeでスマホを開発するスタート地点に立った。