react-native-youtube-iframeライブラリを利用したアプリをビルドしてつかってみる

今回、react-native-youtube-iframeというライブラリを利用して、Youtube動画を見れるアプリを作成します。

　Youtube公式アプリにリンクがしてあるので、違法ではないようです。まあ、これに関しては自分で使用するだけなので関係ないですが。

lonelycpp.github.io

上記HPのサンプルコードを流用します。

ボタンは、用途上大きくしてます（リモコン操作で行うため）

Buttonではwidthは設定できますが、heightは変更できないようなので、

TouchableOpacityとTextの合わせ技でボタンを作成してます。

import { StyleSheet} from 'react-native';

import { Button, View, Alert, TouchableOpacity, Text} from 'react-native';

import { useState } from 'react';

import YoutubePlayer from 'react-native-youtube-iframe';

export default function App() {

  const [playing, setPlaying] = useState(false);

  const onStateChange = (state) => {

    if(state === "ended"){

      setPlaying(false);

      Alert.alert("video has finishing playing!");

    }

  }

  const togglePlaying = () => {

    setPlaying((prev) => !prev);

  }

  return (

    <View>

      <YoutubePlayer

         height={300}

         play={playing}

         playList={["uy-XyM", "AF9iSc", "MfYcM", "5ch9RQ"]}

         onChangeState={onStateChange}/>

      <TouchableOpacity style={{justifyContent:"center",alignItems:"center",height: 300,width:450, backgroundColor:"blue"}}

                        onPress={togglePlaying}>

        <Text style={{color:"white"}}>{playing ? "pause" : "play"}</Text>

      </TouchableOpacity>

    </View>

  );

}

・Youtube動画のIDですが、v=の後をとってくればよいのですが、最近は、

RmuL-BPFi2Q&list=RDMMAbZH7XWW_k&index=4

のように、list と indexがそのあとについてくることがありますが、

この場合、RmuL-BPFi2Qだけで同じ動画がみれます。逆にそうしないとエラーになります。

・videoタグなど用意しなくてもいけるようです。

さて、ビルドです。

npx expo install react-natie-webview

が必要です。

一応、npx expo install --fix

としておきましょう。

⓵expo login　

②eas login

③eas build:configure　　［ここでは、gitを入れておく必要があります。］

VSCodeでGit・GitHubを使う方法を解説する【初心者向き】 (miya-system-works.com)

ここではAndroid用だけ作成してます。

④eas build -p android

EASのホームページで作成できたことを確認すれば、スマホにダウンロードします。

スマホで、AAB installerアプリでインストールで終了です。

スマホで使っていて、翌日くらいに使用しようとしたら『動画が再生できません』となってましたが、原因は一番初めの動画が見れなくなっていたことでした（はじめは見れてました。おそらく投稿者が埋め込み禁止にしたりしたのでしょうか？）。はじめの動画を削除するとみれるようになりました。

これを解決できないでしょうかと考えてみると、

ちょうど、内部ストレージをしているので、ここから、配列を追加したり、削除できるようにしておいて、その配列をYoutubePlayerのplaylistプロパティに渡してあげればできそうである。

ただ、初めの動画を消して見れるようにして、また少し時間を置くと、また、初めの動画が見れなくなった。

実際アプリとして使うには無理ありそう。