名前はちゃんとつけよう navigation.navigateで画面遷移時にパラメータを渡そうと思ったが、画面遷移はするもものparamsが渡らなくて数時間ハマった件。 結論から言うと、同じ名前のルーティングがあったせいで別のところに遷移していたのが原因でした。 基…

ヘッダーボタンの付け方は２通りあります。 reactnavigation.org Screen内でつける スクリーン内の情報を使った処理ができます。 こちらのほうが使いやすいパターンが多いのではないでしょうか。 const TakePhotoScreen = ({ navigation }) => { React.useLa…

react-navigationを使ってモーダルを作ります。 reactnavigation.org 使い方 createStackNavigatorを使って画面を作り、modeプロパティをmodalにするだけです。 ただし、bottomTabNavigatorを使っている場合はタブより上の階層にStackNavigatorを用意しない…

rn-swipeable-panel 今度はSwipeablePanelを使って下からせり出してくるモーダル画面にします。 ただ正確にはというか全然モーダル画面になりません。ただの選択画面です。下のタブも隠れません。 react-native-navigationでちゃんと設定して、多分タブナビ…

Overlay ReactNativeの標準コンポーネントにもModalがありますが、ReactNativeElementsのOverlayを使います。 こちらを使う利点は、標準で背景をグレーにしてくれてPaddingをいい感じに整えてくれます。 react-native-elements.github.io reactnative.dev 使…

今度はライブラリを使ってみます。 react-native-swiper github.com こちらも使い方は簡単。表示対象のリストを作ってSwiperタグで囲むだけです。いい感じですね。 このパッケージを使う利点は、 ドットで何枚目を表示しているかがわかる。 左右の移動ボタン…

写真などをスワイプして次の画像を見れるようにします。 意外と簡単で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などでキーボードを出したときに、 入力欄がせり上がってきたキーボードで隠れてしまわないように画面をせり上げてくれるものです。 タグを追加しただけだとちょっとしか動かなくて隠れたままになってしまっていました。 問…