プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

react-nativeでバーコード生成、表示と端末の明るさを変更する方法

やりたいこと

react-nativeを用いたネイティブアプリで、バーコードを生成し、外部の端末で読み込みがしたい。

読み込み時に端末の明るさを明るくし、読み込みやすい状態にしたい。

使用するパッケージ

バーコード生成にはreact-native-barcode-builder

端末の明るさを変更するにはreact-native-device-brightnessを使う
上記パッケージだと今後サポートされなくなりますよというwarningが気になったため、@adrianso/react-native-device-brightnessを使います。

npm i react-native-barcode-builder --save
npm i @adrianso/react-native-device-brightness --save

実装

バーコード

各コードを生成し表示したいコンポーネントで以下をimportする

import QRCode from 'react-native-qrcode';
import Barcode from 'react-native-barcode-builder';

表示したい箇所に以下コードを書く

<QRCode
  value={"0123456789"}
  size={200}
  bgColor='black'
  fgColor='white'
/>
<Barcode value={"0123456789"} format="CODE128" />

生成と表示はこれだけ。
後は外部のコンポーネントからpropsでデータを渡すなりで汎用的にする。

デバイスの明るさ

以下をimportする

import DeviceBrightness from '@adrianso/react-native-device-brightness';

任意のメソッドでDeviceBrightness~を読み込む

onEnter={() => DeviceBrightness.setBrightnessLevel(1)}
onExit={() => DeviceBrightness.setBrightnessLevel(0)}