まず、ミラーリングについて説明します。
※ミラーリングとは？
純正ナビでスマホの画面を映したい場合にはいろいろ方法がありますが、
どの種類の入力ポートがあるかにもよりますが、HDMI入力ポートを利用できるなら、ミラーリングを使用する方法があります。
Wifi環境を構築し、スマホとナビがともにそのWifiにつながれていれば、ミラーリングが可能になります。
次に下記のHPの内容を参考にして、アプリを作成していきます。
（react-native-youtubeやreact-native-youtube-iframライブラリは使えなかったので）
betterprogramming.pub
react-native-youtube-iframeのように、プレイリストを渡すことはできなかった（可能かもしれませんがわかりませんでした）ので、
React Navigationを使用し、『１コンポーネント１Youtubeコンテンツ』としました。
次に画面の向きを、スマホを動かしたときに変更したかったのですが、
react-native-orientation-lockerについても使用できず、
結局、横画面固定としてます。app.jsonの'expo'の中の'orientation'を、 'landscape'にしてます。
上記HPの通りに、iFrame.jsを作成し、次に、下記のようなScreenTemplate.jsを作成し、それをもとにそれぞれのYoutubeコンテンツを表示するコンポーネントを作成し、React Navigationで遷移できるようにしました。
ScreenTemplate.js
import React, {useRef, useState } from 'react';
import {StyleSheet, View, SafeAreaView, Text, useWindowDimensions, TouchableOpacity} from 'react-native';
import WebView from 'react-native-webview';
import {buildHTML} from '../iFrame';
function ScreenTemplate({htmlId}){
const webRef = useRef(null);
const nextVideo = () => {
//処理
navigation.navigate("SecondScreen");
}
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;
return (
<SafeAreaView style={styles.container}>
<View style={{width: windowWidth,height: windowHeight*2/3}}>
<WebView
ref={webRef}
source={{html: buildHTML(htmlId)}}
allowsFullscreenVideo={false}
allowsInlineMediaPlayback
scalesPageToFit={false}
mediaPlaybackRequiresUserAction={false}
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity style={{justifyContent:"center",alignItems:"center",width:"100%", height:60,backgroundColor: "orange"}}
onPress={nextVideo}>
<Text style={{color: "white"}}>NEXT</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
},
buttonContainer: {
flexDirection: 'column',
width: '100%',
},
});
export default ScreenTemplate;
通常のYoutubeアプリと違って、画面のどこを押してもPLAY,PAUSEができます。
ピンチングで、10秒早送り、10秒巻き戻しは可能です。
進行バーを下に表示するには、プロパティを少し触るだけでできます。今回は不要なのでしてません。
