React Native

概要 AndroidシミュレータをインストールしてからReact Nativeアプリをnpx react-native run-androidで実行しようすると「No emulators found as an output of `emulator -list-avds`」となり、実行できないことがある。 原因 ANDROID_HOMEなどの必要な環境変数が定義されていないため、エミュレータが起...

概要 React Nativeアプリをeas buildコマンドでビルドすると、デフォルトでは.aabファイルが生成される。.apkファイルを生成したい場合はeas.jsonに設定を追加する必要がある。 追加する設定 "production": { "android": { "buildType": "apk" } } サンプル { "cli": { "version": ">= 5.9.1" }...

概要 React Native PaperはReact Native用のUIコンポーネント集である。 インストール npm install react-native-paper babel.config.jsにenvキーを追加（リリースビルドに必要な設定） module.exports = function(api) { api.cache(true); return { presets: , e...

概要 React Nativeではalert関数は使えるがconfirm関数は使うことができない。confirm関数の代用はいくつかあるが、Alertコンポーネントを使うのが最も簡単であると思われる。 サンプル import { Alert } from 'react-native'; 〜省略〜 Alert.alert("テスト", "登録してもよろしいですか？", [ {text: "CANCE...

概要 React NativeでScrollViewコンポーネントのrefreshControlプロパティにRefreshControlコンポーネントを渡すと「下にスワイプしてデータを更新」を実装することができる。 サンプル import { StyleSheet, ScrollView, ImageBackground, RefreshControl } from "react-native";...

概要 React Nativeで背景画像を表示する場合、ImageBackgroundコンポーネントを使う。 背景を画像にするだけでアプリがカッコよく見える。 paddingを指定して上下左右の余白に背景画像を表示することで、カッコよく見える。 サンプル import { StyleSheet, ScrollView, ImageBackground } from "react-native"; ...

概要 React Nativeでスクロールが必要な場合、ViewコンポーネントではなくScrollViewコンポーネントを使用する。 スタイルのalignItemsやjustifyContentを指定するとエラーになるので注意。 keyboardDismissMode="on-drag"とすると、スクロール時にキーボードを閉じることができる。 サンプル import { StyleSheet, T...

概要 React Nativeで画像を表示するにはImageコンポーネントを使用する。sourceプロパティは指定する値がURLかファイルパスかで記述方法が異なる。 URLの場合 オブジェクトのuriキーにURL文字列を渡す。<Image style={{ width: 100, height: 100 }} source={{ uri: "" }} /> ファイルパスの場合 require関数を...