ReactNative
algoliaとは 全文検索ができるクラウドサービスです。Firebaseでできない検索ができるようになります。 How Algolia Works | Getting Started | Guide | Algolia Documentation 下記のデモを見るとイメージしやすいです。 Widgets Showcase | React InstantS…
最新版はエラーで使えなかったので、レガシー版を使います。ただこのレガシー版はv40で消えるみたいですが。 docs.expo.io docs.expo.io Notificationの手順 起動時にPermissionを許可させる 起動時にdeviceTokenを取得してサーバーに保存 CloudFunctionに通…
画像の上に三角形のラベルを表示 borderWidthで三角形の大きさを調整します。 <Image> ... </Image> <View style={{ position: 'absolute', left: 2, top: 2, }} > <View style={{ borderLeftColor: 'red', borderLeftWidth: 50, borderBottomColor: 'transparent', borderBottomWidth: 50, }} ></View> </view>
数値 isNaNで文字の場合は元の値に戻します。 // 変数を文字列で定義した場合 const [amount, setAmount] = React.useState(''); <TextInput keyboardType="number-pad" placeholder="数字を入力してください" onChangeText={(text) => { console.log(text); setAmount(isNaN(text) ? amount : text); }} value={amount} returnKeyType={'done'} ></TextInput> // 変数を数…
名前はちゃんとつけよう 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>…
基本形 dataにリストを渡します。 renderItemは表示する各アイテムのReactコンポーネントを指定します。Viewとか、Imageとか。 引数itemからdataに渡した情報を取得できます。 keyExtractorはidなど一意になるような文字列を指定します。 const [itemList, s…
Button オプション指定なしでもイメージするところのいわゆるボタンっぽいボタンが簡単に出来ます。 <Button title="確認する" buttonStyle={{ backgroundColor: 'tomato' }} /> Image これがいいのは読み込みが完了したタイミングでふわっと表示してくれる。 タグの中にテキストを置くだけで、画像の上に文字を出したりできる。 </button>
スピナーっていうんでしょうか。砂時計っていうんでしょうか。 名前が分かりませんが、通信中であることを示すためグルグル回るものを出します。 ReactNativeにはActivityIndicatorが用意されているようでした。 ただ画面の上からオーバーレイをして出したい…
firebase storage に画像をアップするために、ユニークなファイル名を考えてみる。 確かuuidはエラーで使えなかった記憶がある。 expo-randomはcrypto.randomBytesと同じだということらしいです。Math.randomより偏りがないということらしいですが仕組みはよ…
アプリが個人情報などにアクセスする場合はユーザーに許可を求める必要がある。 写真、位置情報、アドレス帳、通知などだ。 これをやらないとアプリストアの審査で許可されないからだ。 ただ実装しなくても動作はできるように見える。裏を返せばアプリストア…
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.…
割と難しい 簡単にできるのかと思いきや、いろいろと知識がないと難しいです。とくにExpoやReactNativeだと通常のWebアプリに比べてややこしそうだという印象です。 Provider Providerはソーシャルログインを提供しているサービスのことです。GoogleとかFace…
アプリを閉じると firebaseSDKを使ってログインした後にアプリを閉じるとどうなるのでしょうか？ 再度アプリを起動すると、ユーザIDを取得して表示することができます。つまりまだログイン状態になります。不思議ですね。デバイスIDか何かを取得して識別して…
BottomTabNavigatorやDrawerNavigatorを使う場合は、そのままscreenをcomponentに渡してもヘッダー部分が表示されません。 ヘッダーを表示させる場合は、StackNavigatorを間に噛ませる必要があります。Screen側でオプションをゴニョゴニョしてもできません。…
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'; // 言語ごとの翻訳…
Amplitudeを使うとアプリを使用したユーザのログを収集できます。 OSバージョンや環境、ログイン、使用ユーザ、表示画面などの操作ログを取得できます。 import * as Amplitude from 'expo-analytics-amplitude'; Amplitudeでアカウントを作成し、プロジェク…
Expoビルドしようとしたときのエラー。 expo build:ios Your application icon can't have transparency if you wish to upload your app to Apple Store. 透明付き画像（アルファ付きpng）は使用できなようなので、 macのプレビューで「書き出し」を行って…
