javascript - React Native: Allow device rotation only when webview plays video - Stack Overflow

admin管理员组

文章数量:1296453

My current working app is locked in portrait mode through entire screens. The app plays embedded YouTube videos on webview and I just want to allow the landscape mode only when it plays in full screen.

I see there are some tricks for native ways and I think there aren't patible with React Native. I also checked react-native-orientation but it doesn't help me.

Is there a simple and clean way I can implement this?

My current working app is locked in portrait mode through entire screens. The app plays embedded YouTube videos on webview and I just want to allow the landscape mode only when it plays in full screen.

I see there are some tricks for native ways and I think there aren't patible with React Native. I also checked react-native-orientation but it doesn't help me.

Is there a simple and clean way I can implement this?

• javascript
• android
• ios
• webview
• react-native

Share Improve this question Follow asked Mar 4, 2017 at 14:16 OscarOscar 33122 gold badges66 silver badges1515 bronze badges 7

• Hi oscar, I can remend you a way but still not sure if its for you. Display your video thumbnail with a play icon above it. when user press it, open a Modal that contains your VideoPlayer, and in styles of that videoplayer make it rotate 90 degrees to the left or right. This won't change ever, so it won't be 100% user friendly. if react-native-orientation doesn't help you, you can only use some js tricks for now or write a native ponent yourself (Also if you use react native video, there is an option to make it fullscreen by calling a function.) – eden Commented Mar 4, 2017 at 16:31
• Hi Enie, react-native-video would be an alternative ways but I can't figure out how can play YouTube videos by react-native-video because I can't get direct reference to youtube file. – Oscar Commented Mar 6, 2017 at 7:44
• You can use react-native-youtube but don't use npm install. Im using this repo and its npm was old, better install directly from git. You can pass youtube id as prop to play YT videos – eden Commented Mar 6, 2017 at 7:55
• I just want a player which can play youtube & vimeo videos. If I use react-native-youtube, it can't play vimeo videos. – Oscar Commented Mar 6, 2017 at 10:09
• You can check the source of the provided link whether its a youtube url or video. Then render which player thats required simply in your render function. – eden Commented Mar 6, 2017 at 10:10

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

I may be a little late to the party but I've recently added what your question is requesting.

Our goal

The application should be fixed to a portrait orientation, unless a User is watching a video. When watching a video, Users should be able to freely switch between portrait and landscape.

Getting Started

I'll outline how I did it in iOS, the React Native part certainly works on Android too.

Enable ALL orientations

You wan't to enable all orientations (Portrait, Upside Down, Landscape Left, Landscape Right).

I've taken the following image from Google, just ensure all checkboxes are ticked.

React Native Package

Download react-native-orientation and inside of your index.ios.js, add the code to lock the device orientation.

For example, mine's inside a ponentWillMount.

ponentWillMount() {
  Orientation.lockToPortrait();
}

Disable lock when watching a Video via a WebView

I then have a simple VideoPlayer ponent.

<TouchableWithoutFeedback onPress={this.handleClick}>
  <WebView
    source={{uri: 'https://youtube.'}}
  />
</TouchableWithoutFeedback>

I used TouchableWithoutFeedback as I don't want the User to know that they've clicked something.

Create a handleClick function:

handleClick = () => {
  Orientation.unlockAllOrientations()
}

The tricky bit, and it's hacky!

I couldn't find a way to tell when the User had finished watching a Video within a WebView. This is because iOS uses its native player.

My VideoPlayer ponent is within a ScrollView (amongst other ponents). When the User scrolls (after watching a video), the application will again lock back to a portrait orientation.

<ScrollView
  onScroll={() => { Orientation.lockToPortrait(); }}
/>

Note

This will lock on all devices, including Tablets. If you want to only run it on a phone, I use react-native-device-info to detect whether the device is a tablet or not.

You could wrap all your orientations within an if statement:

if (!DeviceInfo.isTablet()) {
  Orientation.lockToPortrait();
}

本文标签： javascriptReact Native Allow device rotation only when webview plays videoStack Overflow