React NativeでYoutubeを表示する

2020-06-27 hit count image

React NativeでYoutubeを表示するため、react-native-youtubeを使う方法について説明します。

概要

React Nativeでトーイプロジェクトを作る時、Youtubeビデオを表示する必要がありました。

このブログポストではReact NativeプロジェクトでYoutubeビデオを表示するため、react-native-youtubeライブラリを使う方法について説明します。

ここで紹介するソースコードはGitHubで確認できます。

react-native-youtubeインストールや準備

下記のコマンドを使ってreact-native-youtubeをインストールします。

npm install --save react-native-youtube

iOSで使うため、下記のコマンドを実行します。

cd ios
pod install

アンドロイドではreact-native-youtubeを使うためにはYoutube developer API keyが必要です。下記のリンクを使ってYoutube developer API keyを生成します。

react-native-youtube使い方

ビデオ再生

react-native-youtubeを使ってReact NativeでYoutubeを再生するためには下記のようにソースコードを追加します。


import YouTube from 'react-native-youtube';
...
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <YouTube
        videoId="KVZ-P-ZI6W4"
        apiKey="YOUR_YOUTUBE_DEVELOPER_API_KEY_FOR_ANDROID"
        play={true}
        fullscreen={false}
        loop={false}
        onReady={(e) => console.log('onReady')}
        onChangeState={(e) => console.log('onChangeState:', e.state)}
        onChangeQuality={(e) => console.log('onChangeQuality: ', e.quality)}
        onError={(e) => console.log('onError: ', e.error)}
        style={{width: '100%', height: 300}}
      />
    </SafeAreaView>
  );
};

FlatListで使う方法

アンドロイドではreact-native-youtubeを使って複数のYoutubeを同じ画面で表示や再生することができません。このIssueについて詳しくは下記のリンクを参考してください。

したがって、アンドロイドFlatListを使って複数のビデオを表示して、自動再生するためにはFlatListのviewabilityConfigonViewableItemsChangedを使って実装することができます。


...
import YouTube from 'react-native-youtube';

...

const Placeholder = () => {
  return (
    <View style={styles.item}>
      <ActivityIndicator size="large" color="white" />
    </View>
  );
};

const ListVideo = () => {
  const [visablePostIndex, setVisablePostIndex] = useState(0);

  const onViewRef = useRef(({viewableItems}) => {
    if (viewableItems && viewableItems[0]) {
      const index = viewableItems[0].index;
      if (typeof index === 'number') {
        setVisablePostIndex(index);
      }
    } else {
      setVisablePostIndex(-1);
    }
  });
  const viewConfigRef = useRef({viewAreaCoveragePercentThreshold: 80});

  return (
    <View style={styles.container}>
      <FlatList
        data={VIDEO_LIST}
        viewabilityConfig={viewConfigRef.current}
        onViewableItemsChanged={onViewRef.current}
        keyExtractor={(item, index) => `${index}`}
        renderItem={({item, index}) =>
          index === visablePostIndex ? (
            <YouTube
              videoId={item}
              apiKey="YOUR_YOUTUBE_DEVELOPER_API_KEY_FOR_ANDROID"
              play={true}
              fullscreen={false}
              loop={false}
              onReady={(e) => console.log('onReady')}
              onChangeState={(e) => console.log('onChangeState:', e.state)}
              onChangeQuality={(e) =>
                console.log('onChangeQuality: ', e.quality)
              }
              onError={(e) => console.log('onError: ', e.error)}
              style={{width: '100%', height: 300}}
            />
          ) : (
            <Placeholder />
          )
        }
      />
    </View>
  );
};
...

上のソースコードをもっと詳しく見ると、


...
const viewConfigRef = useRef({viewAreaCoveragePercentThreshold: 80});
...
<FlatList
  viewabilityConfig={viewConfigRef.current}
...

上のように画面へ表示されたItemがどのぐらい見えると、画面へ表示されたかを判断できるような基準を作成します。


...
const onViewRef = useRef(({viewableItems}) => {
    if (viewableItems && viewableItems[0]) {
      const index = viewableItems[0].index;
      if (typeof index === 'number') {
        setVisablePostIndex(index);
      }
    } else {
      setVisablePostIndex(-1);
    }
  });
...
<FlatList
  onViewableItemsChanged={onViewRef.current}
...

そして画面へ表示されたItemが変更される時CallされるonViewableItemsChangedを使って現在表示された複数のItem中で一番最初のItemのIndexをuseStateを使って保存します。


<FlatList
  ...
 renderItem={({item, index}) =>
    index === visablePostIndex ? (
      <YouTube
        videoId={item}
        apiKey="YOUR_YOUTUBE_DEVELOPER_API_KEY_FOR_ANDROID"
        play={true}
        fullscreen={false}
        loop={false}
        onReady={(e) => console.log('onReady')}
        onChangeState={(e) => console.log('onChangeState:', e.state)}
        onChangeQuality={(e) =>
          console.log('onChangeQuality: ', e.quality)
        }
        onError={(e) => console.log('onError: ', e.error)}
        style={{width: '100%', height: 300}}
      />
    ) : (
      <Placeholder />
    )
  }
...

このように保存したIndexを比較して最初のItemのビデオだけ表示して再生するように設定することができます。このように修正すると、複数のビデオの自動再生することができます。

完了

これでReact NativeでYoutubeを再生する方法について見てみました。ここで紹介したソースコードはGitHubで確認できますので、全てのソースコードを見て、参考しても良いかと思います。

Posts