写真などをスワイプして次の画像を見れるようにします。 意外と簡単でScrollViewにpagingEnabledをつければ、スクリーンに表示されない部分はページめくりが有効になります。 ScrollViewの中身はViewやImageを並べておけばいいようです。 <ScrollView ref={imageScrollViewRef} horizontal pagingEnabled style={{ height: Window.width, }} > {item.image_uri?.</scrollview>…

scrollTo()メソッドを使います。これで指定の場所まで移動してくれます。 reactnative.dev コンポーネントのメソッドを使うにはrefを取る必要があるようです。 ja.reactjs.org const imageScrollViewRef = React.useRef(null); // どこかのボタンなどから呼…

むしろCSSのお話ですがよく知らなかったので。 reactnative.dev flexGrow 親要素に対して幅が余っていた場合に、そのあまりを分配する比重を定義する。 例えばwidth:375のボックスの中にwidth:100のボックスが3つあれば75余るので、それを比重に応じて拡大す…

この演算子はES2020で導入されるらしいですが、react-nativeを入れるとこちらの機能を含んだbabelプラグインがインストールされて最初から使えるようになってるみたいです。 最初サンプルとかで出てきて？？となってましたが、検索がしづらいのなんの。名前…

遷移先スクリーンにパラメータを渡すには、navigateの第二引数にオブジェクトで渡します。 呼び出し元スクリーン <TouchableOpacity onPress={() => navigation.navigate('Item', { itemId: item.id })} routeオブジェクトで受け取ります。 呼び出し先スクリーン const ItemScreen = ({ route</touchableopacity>…

非同期処理の動作確認で便利。 const wait = (timeout) => { return new Promise((resolve) => { setTimeout(resolve, timeout); }); }; await wait(3000)

基本形 dataにリストを渡します。 renderItemは表示する各アイテムのReactコンポーネントを指定します。Viewとか、Imageとか。 引数itemからdataに渡した情報を取得できます。 keyExtractorはidなど一意になるような文字列を指定します。 const [itemList, s…

Button オプション指定なしでもイメージするところのいわゆるボタンっぽいボタンが簡単に出来ます。 <Button title="確認する" buttonStyle={{ backgroundColor: 'tomato' }} /> Image これがいいのは読み込みが完了したタイミングでふわっと表示してくれる。 タグの中にテキストを置くだけで、画像の上に文字を出したりできる。 </button>

勘違いしていました。 返値は、実行完了の順とは関係なく、 Promise が渡された順に並びます。 とあるので、保証されると思います。 developer.mozilla.org 実際にやってみました。 処理はtimer1000が一番早く終了しますが、渡した順番の通りtimer3000が配列…

スピナーっていうんでしょうか。砂時計っていうんでしょうか。 名前が分かりませんが、通信中であることを示すためグルグル回るものを出します。 ReactNativeにはActivityIndicatorが用意されているようでした。 ただ画面の上からオーバーレイをして出したい…

うまくいかないのはPromiseの問題ではなくまさかのforEachの問題だった！ forEachのループの中でawaitしても待ってくれません。ぐぬぬ・・・。 for-ofなら大丈夫みたいです。 ダメな例（waitで待たずにループを抜けてしまう） func3 = async () => { let acc…

何度調べてもしばらくたつとわからなくなりますね。 特に関数が増えてネストしまくると値が取れなくなってしまったりしています。 async / awaitのポイント awaitをつけるとresolve or rejectを待機するようになる（同期処理） awaitを使うには呼び出し元の…

firebase storage に画像をアップするために、ユニークなファイル名を考えてみる。 確かuuidはエラーで使えなかった記憶がある。 expo-randomはcrypto.randomBytesと同じだということらしいです。Math.randomより偏りがないということらしいですが仕組みはよ…

QueryLanguageってことなので、SQLみたいなものか。 単一のリクエストで動作しモバイル環境でも早い。 「型」システムが採用されており間違えにくい。 フィールドの追加などの変更に強い。 らしい。 graphql.org

アプリが個人情報などにアクセスする場合はユーザーに許可を求める必要がある。 写真、位置情報、アドレス帳、通知などだ。 これをやらないとアプリストアの審査で許可されないからだ。 ただ実装しなくても動作はできるように見える。裏を返せばアプリストア…

KeyboardAvoidingViewはTextInputなどでキーボードを出したときに、 入力欄がせり上がってきたキーボードで隠れてしまわないように画面をせり上げてくれるものです。 タグを追加しただけだとちょっとしか動かなくて隠れたままになってしまっていました。 問…

入力フォームの選択項目などを想定。 別画面で開いたリスト画面で選択した項目を、元画面に反映する。 iOS標準のぐるぐる回すセレクトボックスのコントロール嫌いなのです。 遷移先から値を取る方法 最初単純にcallbackを呼んでいたのだが、ワーニングが出て…

react-native-drag-sortというライブラリを使いました。 パッケージとしては改善の余地がありそうですが、ソースを見るとPanResnponderの使い方など参考になりそうです。 GitHub - mochixuan/react-native-drag-sort: Drag and drop sort control for react-…

基本 Animations · React Native AnimatedとLayoutAnimationという2つのAPIが用意されている。 Animated 動作をいろいろ指定してプログラムします。 Animated.Viewなどで描画する Animated.Image Animated.ScrollView Animated.Text Animated.View Animated.…

yieldは渡されたブロックを展開する。 ブロックは引数で明示しなくても良い。 def test(arg) yield(arg) end test ("VALUE") { |v| puts v } 明示的にブロックを渡す 引数で明示する場合は、&procをつかい、proc.callでブロックを展開す ブロックと通常の引…

メソッドの末尾にイコールが付いてるのはなんだろうと思って調べてみると、 別に何のことはないそういうメソッド名だということだ。 こういうのがくっついてるとなにか特別な意味があるのかもとか、 別の演算子なのかと思ってしまうが大抵はなんとも無い。 …

割と難しい 簡単にできるのかと思いきや、いろいろと知識がないと難しいです。とくにExpoやReactNativeだと通常のWebアプリに比べてややこしそうだという印象です。 Provider Providerはソーシャルログインを提供しているサービスのことです。GoogleとかFace…

アプリを閉じると firebaseSDKを使ってログインした後にアプリを閉じるとどうなるのでしょうか？ 再度アプリを起動すると、ユーザIDを取得して表示することができます。つまりまだログイン状態になります。不思議ですね。デバイスIDか何かを取得して識別して…

関数コンポーネント Reactではclass based componentが使われなくなってきて、functional componentを推しているようです。functional componentではhooksを使っていろいろ実装する必要があります。 useEffect functional componentではcomponentDidMountやc…

BottomTabNavigatorやDrawerNavigatorを使う場合は、そのままscreenをcomponentに渡してもヘッダー部分が表示されません。 ヘッダーを表示させる場合は、StackNavigatorを間に噛ませる必要があります。Screen側でオプションをゴニョゴニョしてもできません。…

状態管理のやり方 React Context ライブラリ不要。 const AppContext = React.createContext(null); // Consumer配下のcontextでアクセス function LoginScreen() { return ( <AppContext.Consumer> {(context) => ( <Text>LoginScreen</Text> <Button title="login" onPress={() => context.setLogin(true)}></Button> </View> )}

Redux Toolkit というのを使うと簡潔に書けるらしい。 [https://qiita.com/sakito/items/e446d0f0974f2e12a5f5:embed:cite]

import firebase from '../../firebase'; ↓ import firebase from 'app/src/firebase'; ルートのエイリアスをpackage.jsonに設定する。 { "name": "app", } jsconfig.jsonのpathsにも設定すると、VSCodeでインテリセンスが使える。 // jsconfig.json { "comp…

i18n-js ローカライズのため翻訳ファイルを作成します。 Localization - Expo Documentation import * as Localization from 'expo-localization'; import i18n from 'i18n-js'; import en from './en.json'; import ja from './ja.json'; // 言語ごとの翻訳…

Cloud Functions Cloud Functions for Firebase Cloud Functions for Firebase はじめに: 最初の関数の記述とデプロイ はじめに: 最初の関数の記述とデプロイ | Firebase 簡単に言うとコードをクラウドに保存して、データベースやストレージ、HTTPといった …