Udostępnianie widoku między dwoma widokami reaguje natywnie

Question

Mam aplikację podobną do kanału Facebook z filmami w nich. Używam react-native-video do renderowania filmów. Teraz, aby zrobić wideo na pełnym ekranie, zawinąłem komponent do innego komponentu. Ten inny komponent ma TouchableHightlight. W ramach zdarzenia onPress TouchableHighlight tworzona jest nowa trasa, a this.props.children jest przekazywane jako rekwizyt do komponentu na trasie. Nowy komponent właśnie sprawia, że ​​{this.props.children}. Ale to powoduje, że owinięty komponent Wideo odmontowuje i jest rekonstruowany w nowym widoku (to jest wywołuje ponownie konstruktor komponentu). To powoduje, że wideo ładuje się i zaczyna od pozycji początkowej, zamiast korzystać z tego samego komponentu i przechowywać buforowane dane i wznawiać je z miejsca, w którym zostało.

Link do projektu demonstracyjnego: https://github.com/shahankit/video-player-fullscreen

Chcę coś podobnego do domyślnego sterowania odtwarzaczem, które jest wbudowane gdy kontrole prop podjęcia.

Te sposoby wytwarzania składnika iść fullscreen pochodzi z react-native-lightbox

Answer 1

Utwórz widok hierarchii podobny do następującego.

- Root View(position: absolute) 
    - Your old entire screen layout which small video view is inside of it. 
    - Your fullscreen video view with opacity = 0 with more zIndex 

następnie użyć onPress na małym widzenia wideo, aby przełączyć krycie pełnoekranowego widoku wideo