Expo：ReactネイティブのVideoPlayerのカスタムボタン

Question

ビデオ再生の上にオーバーレイされたカスタムボタン（たとえば、TouchableOpacityを使用してレンダリングする目盛り/十字/円）でフルスクリーンビデオ再生をレンダリングします。私はビデオコンポーネントにサブコンポーネントを追加できないようです。ここで私が何をしようとしていますものです： -

renderVideoPreview() { 
    return (
     <View 
     style={{ 
      flex: 1, 
      backgroundColor: 'transparent' 
     }} 
     > 
     <Video 
      source={{ uri: this.state.tempRecording }} 
      rate={1.0} 
      volume={1.0} 
      muted={true} 
      resizeMode="cover" 
      shouldPlay 
      isLooping 
      style={{ flex: 1 }} 
     > 
      <View style={{ 
      backgroundColor: 'transparent' 
      }}> 
      <TouchableOpacity style={styles.circle}> 

      </TouchableOpacity> 
      </View> 
     </Video> 
     </View> 
    ); 
    } 

私はビデオ・コンポーネントの外でコンポーネントを置くことを試みたが、それは、私はそれが欲しかったものを達成しませんでした。

renderVideoPreview() { 
    return (
     <View 
     style={{ 
      flex: 1, 
      backgroundColor: 'transparent' 
     }} 
     > 
     <Video 
      source={{ uri: this.state.tempRecording }} 
      rate={1.0} 
      volume={1.0} 
      muted={true} 
      resizeMode="cover" 
      shouldPlay 
      isLooping 
      style={{ flex: 1 }} 
     /> 
     <View style={{ 
      backgroundColor: 'transparent' 
     }}> 
      <TouchableOpacity style={styles.circle}> 

      </TouchableOpacity> 
     </View> 
     </View> 
    ); 
    } 

コードの出力は以下のとおりです。

すべてのヘルプ「のビデオがサブビュー持つことができません」を - ：「透明」

私は常に取得エラーはこれです：それは、私はのbackgroundColorを指定したにも関わらず、全体ビューコンポーネントを白く感謝される:)。

Answer 1

動画コンポーネントには検出された子コンポーネントはありませんが、絶対配置することで兄弟コンポーネントを動画の上に重ねることができます。概念的には、これの要旨は次のとおりです。https://github.com/expo/videoplayer：カスタムビデオコントロールと例えば万博VideoPlayerコンポーネントを

render() { 
    return (
    <View> 
     <Video /> 
     <TouchableOpacity style={{ position: 'absolute' }}> 
     <Text>Button</Text> 
     </TouchableOpacity> 
    </View> 
); 
} 

チェックしてください。このようにビデオプレーヤーをレンダーすることができます：