page opens in portrait orientation
press landscape to fix screen in landscape orientation
press auto to unlock screen
rotate phone, screen rotates too
press portrait to fix screen in portrait orientation
//cmdnpm install @ionic-native/core
npm install @ionic-native/screen-orientation
npm install cordova-plugin-screen-orientation
---------------------------------------------
//tab3.tsx
import React, { useState, useEffect } from 'react';
import {
IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonAlert, IonButton, IonCard, IonCardHeader,
IonCardSubtitle, IonCardTitle, IonCardContent,
IonItem, IonIcon, IonLabel, IonBadge, IonList,
IonItemDivider, IonCheckbox, IonFab, IonFabButton,
IonFabList, IonItemGroup, IonItemSliding,
IonItemOptions, IonItemOption, IonNote, IonMenu,
IonRouterOutlet, IonListHeader, IonMenuToggle,
IonButtons, IonMenuButton, IonInput, IonSplitPane,
IonPopover, IonSpinner, IonRadioGroup, IonRadio,
IonRange, IonSearchbar, IonFooter, IonSegmentButton,
IonSegment, IonToast, IonToggle, IonTextarea
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
call, home, heart, pin, star,
globe, basket, camera, bookmark
} from 'ionicons/icons';
import { ScreenOrientation } from '@ionic-native/screen-orientation'
const Tab3: React.FC = () => {
const [oritation, setOritation] = useState<string>('')
useEffect(() => {
setOritation(ScreenOrientation.type)
}, []);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>screenOrientation Example</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItem>
<IonButton onClick={() => {
ScreenOrientation.lock(ScreenOrientation.ORIENTATIONS.PORTRAIT);
setOritation(ScreenOrientation.ORIENTATIONS.PORTRAIT)
}}
>Portrait</IonButton>
<IonButton onClick={() => {
ScreenOrientation.lock(ScreenOrientation.ORIENTATIONS.LANDSCAPE);
setOritation(ScreenOrientation.ORIENTATIONS.LANDSCAPE)
}}
>Landscape</IonButton>
<IonButton onClick={() => {
ScreenOrientation.unlock();
setOritation('auto')
}}
>Auto</IonButton>
</IonItem>
<IonItem>
<IonLabel>Orientation:</IonLabel>
{oritation}
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
export default Tab3;
reference:
https://stackoverflow.com/questions/57787916/what-is-the-right-way-to-use-ionic-native-cordova-plugins-with-ionic-react
https://ionicframework.com/docs/native/screen-orientation
