React Native(Expo)で、react-native-youtube-iframeライブラリをつかってみる。

さて、アンドロイド用のリモコンを買ったのですが、これを使って、Youtube動画を再生したいと思うようになりました。（車で、Youtube動画をうつす方法はいろいろありますが、最近ottocastなるものが流行っているようですが、流行りにのらずに、ミラーリングを使用してます。ただ、これだと画面タッチでは操作できず、スマホをタッチ操作するか、あるいは、Bluetoothリモコンをスマホにつなげ、リモコン操作できるようにするかになります。）

その場合、カーソルをYoutube動画の再生ボタンの上に合わせる必要がありますが、

そうではなく、下により大きなボタンを押せるようにしたいという需要がでてきました。

そこで、そういうアプリを作成しようとした際に、react-native-youtube-iframeライブラリというのがあることを知りましたので、今回はそれについてやっていきます。

ドキュメントはこれです。

React Native Youtube-iframe | React Native Youtube iframe

まず、yarnコマンドを使えるように、yarn パッケージをインストールします。

npm install -g yarn

次に、yarn add react-native-youtube-iframeとします。

さらに、それに合わせ react-native-webviewライブラリもインストールが必要ですので、

yarn add react-native-webview　

とします。

ビルドを見据えているようなら、最後に

npx expo install --fix 

としておきます。

そのうえで、サンプルコードをさらに簡単にしたものを作成してみました。

import { StyleSheet} from 'react-native';

import { Button, View, Alert} 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}

         videoId={""} ・・・・⓵

         onChangeState={onStateChange}/>

      <Button title={playing ? "pause" : "play"} onPress={togglePlaying}/>

    </View>

  );

}

⓵にYoutube動画IDをいれます。

これについては、URLの

https://www.youtube.com/watch?v=      の後に続く数字も含む文字列です。　

また、YoutubePlayerコンポーネントの上の上のViewには、余計なスタイルを入れると動画が表示されない場合がありますので注意が必要です。