上尾市のWEBプログラマーによるブログ

概要 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関数を...