ReactNativeのexpoを雑に触ってみた件

雑にReactNativeのExpoを触ったメモ。

ReactNative案件がきそうなので、触ることにした。Cordovaもちょこちょこ調べてみた

リポジトリはこちら

公式から攻めてみる
expoを使うか使わないか
- 使うことにした
- npmでCLIインストールして、たたくだけでアプリの土台ができてた
- expoでできないこと結構多い
  - WebRTC, Bluetooth, アプリ内課金
  - ここにまとめられている
所感
- スタイルにcssがかけて驚き（違う仕組みでスタイルを調整すると思っていた）
ImagePicker
- expo install {xxxxx} でライブラリをインストールできる
- await ImagePicker.launchImageLibraryAsync() した結果↓

Object {
  "cancelled": false,
  "height": 960,
  "type": "image",
  "uri": "file:///var/mobile/Containers/Data/Application/C081DC1C-461F-4949-BC88-E50C07125799/Library/Caches/ExponentExperienceData/%2540anonymous%252FAwesomeProject-19810a6f-9351-452d-ad5d-e762f499d7a2/ImagePicker/1F6298B7-F81C-4F1F-8D1F-CC015DD6326C.jpg",
  "width": 1280,
}

Over the Air（通称OT）について
- Expoだとデフォルトで実行できる（https://docs.expo.io/guides/configuring-ota-updates/）
- Expoなしでは、外部ツールを使う必要がある
  - CodePush
  - 基本無料らしい
- どちらもCordovaでもReactNativeでも可能
- パッと調べた感じ、OTAはIoTの用語らしい。そら確かにファームウェアを更新するときと一緒か
ログについて
- ReactNativeFirebaseのAnalyticsで可能
- CordovaにもFirebaseのwrapperがあることにはあるが少し対応状況が微妙…？
アプリ内課金
- CordovaにもRNにもあった
  - https://github.com/j3k0/cordova-plugin-purchase
  - https://www.npmjs.com/package/react-native-iap
Redux
- actionの定義がとても嫌だったのでこちらを参考にReduxToolkitを導入してみた
  - コードがグッと減ったしRNでも利用できた
- @react-native-community/async-storage がとてもよかった
  - テキストフィールドを常に保存する場合は、コンポーネントに以下のように書ける
    - もう少しスマートに書きたい
    - webでも同じ挙動で嬉しかった

function DetailsScreen() {
  const [text, setText] = React.useState("");

  React.useEffect(()=>{
    AsyncStorage.getItem('storage_Key').then(res=>{
      if (res===null) return
      setText(res)
    })
  }, [])

  React.useEffect(() => {
    AsyncStorage.setItem('storage_Key', text)
  }, [text])

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TextInput
       style={{ height: 40 }}
          placeholder="Type here to translate!"
          onChangeText={input => setText(input)}
          value={text}
        />
  )

Tab.NavigatorとStack.Navigator
- Stackはスタック形式に履歴を保存していく
- Tabは各自状態を持つ
  - 入れ子構造も可能（Tab>Stack>Tab>Stackなど）

tech expo React

See also