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なしでは、外部ツールを使う必要がある
    • どちらもCordovaでもReactNativeでも可能
    • パッと調べた感じ、OTAはIoTの用語らしい。そら確かにファームウェアを更新するときと一緒か
  • ログについて

    • ReactNativeFirebaseのAnalyticsで可能
    • CordovaにもFirebaseのwrapperがあることにはあるが少し対応状況が微妙…?
  • アプリ内課金

  • 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