React Native integrated react-native-orientation (horizontal and vertical screen widget) sample code

React Native integrated react-native-orientation (horizontal and vertical screen widget) sample code

1, the installation

• Official Links: https://www.npmjs.com/package/react-native-orientation

#安装
npm install react-native-orientation --save
#链接所有依赖
react-native link react-native-orientation

2, the official API

#锁定为横屏
lockToPortrait()

#锁定为竖屏
lockToLandscape()

#锁定为左竖屏
lockToLandscapeLeft()

#锁定为右竖屏
lockToLandscapeRight()

#解除所有锁定
unlockAllOrientations()

#得到当前屏幕的信息
getOrientation((err, orientation) => {})
getSpecificOrientation((err, specificOrientation) => {})

3, add, remove monitor

/**
 * 添加监听
 *
 * orientation 将返回以下值之一：
 *
 * LANDSCAPE
 * PORTRAIT
 * PORTRAITUPSIDEDOWN
 * UNKNOWN
 */
 Orientation.addOrientationListener(（orientation）=>{});
 /**
   * specificOrientation 将返回以下值之一：
   *
   * LANDSCAPE-LEFT
   * LANDSCAPE-RIGHT
   * PORTRAIT
   * PORTRAITUPSIDEDOWN
   * UNKNOWN
   */
 Orientation.addSpecificOrientationListener((specificOrientation)=>{});

 //移除监听
 removeOrientationListener（（orientation）=> {}）;
 removeSpecificOrientationListener（（specificOrientation）=> {}）;

4, sample code

import React, {Component} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import Orientation from 'react-native-orientation';


export default class App extends Component<Props> {

    constructor() {
        super(...arguments);

        this.state = {
            isBool: Orientation.getInitialOrientation() === 'PORTRAIT',//当前是否是竖屏(true),横屏(false)
            summary: ''//描述
        };

        this._handleOnPress = this._handleOnPress.bind(this);
    }


    //生命周期函数、render渲染完成之后调用
    componentDidMount() {
       //默认锁定为竖屏
       Orientation.lockToPortrait();
    }

    //自定义方法
    _handleOnPress = () => {
        const {isBool} = this.state;
        if (isBool) {
            this.setState({isBool: false, summary: '本来是竖屏、现在锁定为横屏了....'});

            //竖屏时、锁定为横屏
            Orientation.lockToLandscape();

        } else {
            this.setState({isBool: true, summary: '本来是横屏、现在锁定为竖屏了....'});

            //横屏时、锁定为竖屏
            Orientation.lockToPortrait();
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>方向:{this.state.isBool ? '竖屏' : '横屏'}</Text>
                <Text style={styles.welcome}>描述:{this.state.summary}</Text>

                <Button title={'切换屏幕方向'}
                        onPress={() => this._handleOnPress()}/>
            </View>
        );
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

5, showing the effect of

1): Default

2): switching to landscape portrait

3): horizontal screen switches to portrait

6, packaged compilation solve unusual problems, Execution failed for task ': react-native-orientation: verifyReleaseResources'.

1): Modify node_modules \ react-native-orientation \ android \ build.gradle file dependencies compile is under implementation.

2): Modify node_modules \ react-native-orientation \ android \ build.gradle file, consistent with the android \ build.gradle file version.

3): can be repackaged.

4): RN packaged offline APK reference links: https://blog.csdn.net/weixin_44187730/article/details/86492907