概要
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のviewabilityConfigとonViewableItemsChangedを使って実装することができます。
...
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で確認できますので、全てのソースコードを見て、参考しても良いかと思います。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
