フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

ReactNative

React Native カウントアップ処理を実装する

day.js インストール yarn add dayjs github.com day.jsの設定 下記の処理はdayjsを日本時間に設定するための処理 import dayjs from 'dayjs' // dayjsの タイムゾーンの設定 dayjs.extend(require('dayjs/plugin/timezone')) dayjs.extend(require('dayjs/p…

ReactNativeでアプリ内にデータを保存する(AsyncStorage)

参考記事 AsyncStorageは非推奨らしいので使う際はお気をつけて. reactnative.dev コード 利用するためにパッケージをimportする import { AsyncStorage } from "react-native" 下記はローカルにデータを保存するための関数 const setStoreData = async (key…

ReactNative上でQRコードを表示する

参考ページ 下記のパッケージを利用すると簡単にQRコードを生成することができる github.com インストール yarn add react-native-svg react-native-qrcode-svg コード import QRCode from 'react-native-qrcode-svg'; // QRコードに表示するアイコンを指定…

ReactNativeでネットワーク通信のチェック(vibration)

参考ページ ネットワーク docs.expo.io Vibrate reactnative.dev インストール # expo install @react-native-community/netinfo サンプルコード import NetInfo from '@react-native-community/netinfo'; // ネットワーク通信を確認して通信ができなかった…

React Nativeで利用するRealmのアカウント作成とアプリケーションの作成(Expoでは利用できない)

参考ページ https://docs.mongodb.com/realm/react-native/quick-start MongoDBCloudの登録と設定 MongoDBAtlasでアカウント作成 下記のページからアカウントを作成する account.mongodb.com アカウント情報入力 利用規約に同意する グローバルメニューにあ…

DockerでReact Native環境を構築する

参考ページ qiita.com Dockerfile FROM amazonlinux:latest RUN yum update -y ## nodejs RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash - RUN yum install nodejs -y RUN yum -y install wget RUN wget https://dl.yarnpkg.com/rpm/yarn.repo…

ReactNativeのExpoでストアに公開するための関連コマンドのまとめ

関係者に動作確認する際 expo publish https://docs.expo.io/workflow/publishing/ ストア公開 下記のコマンドを実行するとexpoサーバー上で、iosならipaファイルが生成され、androidならapkファイルが生成される expoサーバー上で生成されたiosならipaファ…

ReactNativeでローディング画面を表示する(スプラッシュ画像とアプリアイコンの設定)

スプラッシュ画面 アプリ起動時のスプラッシュ画面の画像は幅は1242ピクセル、高さは2436ピクセルにします。 resizeModeを指定することができ、画像の縦横比に関する設定ができる。 初期ではcontainが設定されており、これは幅・高さのうち小さい方のサイズ…

ReactNativeでOSの判定と端末固有のIDおよび端末名を取得する

OS判定 AndroidとiOSで処理を分けたい場合 import { StyleSheet, Text, View, Platform } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text> {Platform.OS === 'ios' ? 'IOSです' : 'Androidです'} </Text> <StatusBar style="auto" /> </View> ); } 端末固有のIDを取得する react-na…

ReactNativeでreduxを利用する

ReactNativeでreduxを利用する npm install redux react-redux Action export const addClip = ({clip}) => { return { type: 'ADD_CLIP', clip } } export const deleteClip = ({clip}) => { return { type: 'DELETE_CLIP', clip } } reducer const initial…

ReactNativeで画面遷移やWebViewを使ってみる

はじめに ReactNativeで画面遷移をしてみる WebViewを利用する 画面遷移 公式サイトでも推奨されているReactNavigationをインストールして利用してみる docs.expo.io 公式サイト(抜粋 / google翻訳) React Navigationは、React Nativeエコシステムで最も人気…

ReactNativeでHooksを使用してみる

はじめに ReactNativeでHooksを利用するにあたり覚えたことを下記にまとめました。 Hookが利用できるバージョン expoではReactHookがSDK33以降から対応している。 ReactNativeは0.59から対応している React 16.8.0 がフックをサポートする最初のバージョンで…

Windows環境にReact Nativeのexpoをインストールする

ExpoCLIインストール expo.io npm install expo-cli --global expoのバージョンを確認する PowerShellで実行すると下記のエラーが発生する > expo --version expo : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nod…