探索React Native世界： Orientation Locker —— 解锁设备方向控制新维度

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Orientation from 'react-native-orientation-locker';
 
export default class App extends React.Component {
  componentDidMount() {
    // 监听方向变化事件
    this.subscription = Orientation.addOrientationListener(this._onOrientationChange);
    // 锁定屏幕方向为横屏
    Orientation.lockToLandscape();
  }
 
  componentWillUnmount() {
    // 取消监听和方向锁定
    Orientation.removeOrientationListener(this._onOrientationChange);
    Orientation.unlockAllOrientations();
  }
 
  _onOrientationChange = (orientation) => {
    if (orientation === 'LANDSCAPE-LEFT') {
      console.log('左侧横屏');
    } else if (orientation === 'LANDSCAPE-RIGHT') {
      console.log('右侧横屏');
    } else if (orientation === 'PORTRAIT') {
      console.log('竖屏');
    }
  };
 
  render() {
    return (
      <View style={styles.container}>
        <Text>方向监听器示例</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

这段代码演示了如何在React Native应用中使用react-native-orientation-locker库来监听和锁定屏幕方向。在组件挂载时，它会添加一个方向变化的监听器，并锁定屏幕为横屏模式。在组件卸载时，它会移除监听器并解锁屏幕方向。这是一个简单的例子，展示了如何在实际应用中集成和使用这个库。