Day26 React Native で爆速プロトタイプアプリを作ろう完走!

引き続き最終章です。

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 3/3 【プラスボタン編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 3/3 【プラスボタン編】|川西発之 / 陳発暉|note ※※※※※本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます.m(_ _ )m1/3 【ウェルカム画面編】:799円 → 199円2/3 【ホームタブ編】:899円 → 299円3/3 【プラスボタン編】:999円 → 399円※※※※※
 note.mu

もくもくやっていきます。

カメラロールから画像を選択しよう

今日はここからです!

動画では映ってませんが、初回はカメラロールへのアクセス許可が聞かれるはずです。

あーそうなんだー。

さて、ここで、余計なことをしてみます。
このアクセス許可のボタンを追加しようかな…

  // カメラロールへアクセス
  onImagePress = async (index) => {
    // スマホ内に保存されてるカメラロールアクセス許可状況を読み取る
    let cameraRollPermission = await AsyncStorage.getItem('cameraRollPermission');

    // もしまだ許可してなかったら、
    if (cameraRollPermission !== 'granted') {
      // 許可を取ってみる
      let permission = await Permissions.askAsync(Permissions.CAMERA_ROLL);

      // もしユーザーが許可しなかったら、
      if (permission.status !== 'granted') {
        // 何もしない
        return;
      }

      // (もしユーザーが許可したら、)カメラロールアクセス許可状況をスマホ内に保存する
      await AsyncStorage.setItem('cameraRollPermission', permission.status);
    }

となっているので、


class ProfileScreen extends React.Component {
  onResetButtonPress = async (key) => {
    // ゴニョゴニョ
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <View style={{ padding: 20 }}>
          <Button
            title="Go to Setting1Screen"
            onPress={() => this.props.navigation.navigate('setting1')}
          />
        </View>

        <View style={{ padding: 20 }}>
          <Button
            title="Reset welcome page"
            buttonStyle={{ backgroundColor: 'red' }}
            onPress={() => this.onResetButtonPress('isInitialized')}
          />
        </View>

        <View style={{ padding: 20 }}>
          <Button
            title="Reset all review data"
            buttonStyle={{ backgroundColor: 'red' }}
            onPress={() => this.onResetButtonPress('allReviews')}
          />
        </View>

        <View style={{ padding: 20 }}> // ←追記部分
          <Button
            title="Reset camera roll permission"
            buttonStyle={{ backgroundColor: 'red' }}
            onPress={() => this.onResetButtonPress('cameraRollPermission')}
          />
        </View>
      </View>
    );
  }
}

こうしてみた。
そんで実行してみます。

あれ?
おかしい。
もう一度聞かれない。
なんでやねん。

よくわかんないので、この件については、保留しておきます。

閑話休題。次に行きましょう。

押されたら光るレビューボタン

さて次いきましょう。

ちゃんと押されたら光るようになってますね!レビューボタンはこれで完成です。

光りましたー!次行きましょう!

レビュー追加ボタン遂に最後の関数です!今までプルダウンメニューやカメラロールから選択してきた旅の情報を、ひとまとめにしてスマホ内に保存するためのボタンを追加します。

さぁ最後ですね!!

`Button`を’react-native-elements’からインポートして、`renderAddButton()`関数を追記します。

なんかやりながら思ったんですが、React Native って VB とか ASP 作ってるみたいな気がしてきました。
ボタンの配置用の UI がなくて、マークアップ(JSX)ですけど。

ボタンが表示されました!!

なので次は追加ボタンが押されたら旅行の情報をスマホ内に保存するというコアの機能を書いていきましょう。これが最後の大一番です!

作れましたーーーー!

おおお!ちゃんと旅行情報が追加されてます!!DetailScreenで詳細を確認でき、ProfileScreenにある赤いボタンで全消去することができるので、ぜひ遊んでみてください(^ ^)

それでは、全部の操作をやってみましょう!!

いえーーーーーーーーーーい!!!!!
これで、全3部のアプリ開発講座を終了しましたー!お疲れさまでした。

React Native のアプリ開発の世界に触れることができました。

途中でエラーもありましたが、だいたい凡ミスで、ほぼノンストップでいけました。あとから、コンポーネントもかなり参考にさせていただくと思います!!

React Native による開発は…

  • JSX は普通のマークアップだからあんまり気にしない。
  • カッコ、波括弧を間違えない。
  • async の設計をきちんとすること。
  • 改行は空白相当。
  • コンポーネント選びが重要。

それでは、Happy Coding!

( ̄ー ̄)bグッ!

明日からは、このアプリをもう少し改良して、サーバーサイドでどうやったらデータを受け取れるのか考えたいと思います。


Twitter のアップロード制限と ffmpeg でもっと圧縮の話

gif動画 を Twitter にアップロードしようとしたらできない!

動画サイズが 17.3 MB にも達していました。
元の動画(mov)のサイズも 17.2 MB でほぼ同じというか、なんら圧縮されていません。

ffmpeg のコマンドはこうでした。

$ ffmpeg -i all.mov -r 24 all.gif

でどうすればいいのかなーってことで調べたら、こう

$ ffmpeg -i all.mov -r 7 all.gif

これで 7 MB まで減りましたー。
動画の画質もまぁまぁ、伝わる程度ですが、Twitter にアップできる!

対応完了です!(^o^)v

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください