React Native

JavaScript

コピー可能なテキストにするには【react native】

テキストを長押しすると、コピーや共有といった選択肢が出てくるようにするには selectable を true にすると良い。 <Text selectable={true}> copyable Text! </Text>
JavaScript

react nativeでQR画像の表示と保存

react-native-qrcode-svgを使用します。インストールにはreact-native-svgも必要なので忘れずに。 npm i react-native-qrcode-svg react-native-svg // npx ...
JavaScript

expo sqliteでのSQLiteの保存先(iOS Simulator)

expo sqlite で保存したDBは以下のパスに保存されているはずです。 /Users/{ユーザー名}/Library/Developer/CoreSimulator/Devices/{ID1}/data/Containers/Data...
JavaScript

DataURLとデータの違いを意識すべし【react nativeハマりメモ】

先日、生成したQRコードをexpoのFileSystemを使って保存しようとしたら、なぜか保存できなかったのですが、DataURLと本体のデータを混同していたことが原因だったので、そのメモです。 DataURLはMDNによるとdata:,<...
JavaScript

React Navigationのヘッダーをカスタマイズする方法

React Navigationのバージョン : 6.x 今回は Bottom Tab でやっていきます。 React Navigationのヘッダーをカスタマイズする方法として、 全てのページをカスタマイズ 個別にカスタマイズ の2通りを...
JavaScript

React Native(Expo)でカメラロールから写真を選択してみる

React Native(Expo)でカメラロールを使うには expo-image-picker を使います。 npx expo install expo-image-picker カメラロールを開くための前提知識 カメラロールを開くステッ...
JavaScript

React Native(Expo)でバッテリーの状態を読み取る & 変化を検知

React Native(Expo)でバッテリーの状態を読み取るには expo-battery を使います。 npx expo install expo-battery バッテリーの状態を読み取る まずはバッテリーの状態を読み取る方から 取...
JavaScript

React Native(Expo)でQRコードを読み取ってみる

STEP1 : ライブラリのインストール React Native(Expo)でQRコードを読み取るには expo-barcode-scanner を使用します。 まずは expo-barcode-scanner をインストールしましょう。...
JavaScript

React Native(Expo)でカメラを使ってみた

React Nativeでカメラを使う方法の一つとして、Expo SDKのCameraがあります。ドキュメントはこちらです。 ドキュメントの方にもコード例がありますので、そちらも参照してみると良いかもしれません 準備 # プロジェクトの作成...
JavaScript

React Nativeで複数のモーダルを多重表示してみた。

実装方法として特別なことをする必要はなく、下記コードのようにすれば、モダールを多重表示することができる。 import { StyleSheet, Text, View, Modal, Button } from 'react-na...