React Native:仅允许某个屏幕更改方向

a11xaf1n  于 2023-05-18  发布在  React
关注(0)|答案(4)|浏览(171)

我想知道是否可以锁定iOS和Android上的所有屏幕,除了一个屏幕。我有一个视频播放器,我想在旋转后全屏显示,但所有其他屏幕需要是唯一的肖像。
我使用react-native-video来做这个。
我设法让它旋转时,使用示例,但我需要设置可能的方向在XCODE和Android Studio。
我也尝试了react-native-orientation,并在上面放了一个.lockToPortrait(),但是倾斜之后,它又改变了。
任何帮助都很感激

rqdpfwrv

rqdpfwrv1#

我也经历过类似的事情。我只想将一个屏幕锁定为横向。我测试了react-native-orientationreact-native-orientation-locker。他们都没有像预期的那样工作。它第一次锁定,但在来回锁定的风景屏幕后,它滑到肖像。
然而,我设法注册了一个addOrientationListener,以进行双重检查,并迫使它始终停留在景观。参见下面的代码。

_onOrientationDidChange = (orientation) => {
  if (orientation == 'PORTRAIT') {
    Orientation.lockToLandscapeLeft();
  }
};

componentDidMount() {
  Orientation.lockToLandscapeLeft();
  Orientation.addOrientationListener(this._onOrientationDidChange);
}

componentWillUnmount() {
  Orientation.unlockAllOrientations()
  Orientation.removeOrientationListener(this._onOrientationDidChange);
}

即使它滑到肖像,它又回到风景。
也许你可以用上面的行为创建一个超类,让每个屏幕都扩展它,除了那个。

d7v8vwbk

d7v8vwbk2#

const {navigation} = props

useEffect(() => {
    navigation.addListener("focus", () => {
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
    });

    navigation.addListener("blur", () => {
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
    });
  }, [navigation]);

focus事件在我们希望允许屏幕旋转的屏幕时被触发,blur事件在用户离开包含此代码的屏幕时被触发,然后被限制为PORTRAIT(在本例中)。

1cosmwyk

1cosmwyk3#

React导航提供方向

<Stack.Screen
            name="SelectionsScreen"
            component={SelectionsScreen}
            options={{
              headerShown: false,
              orientation: 'portrait',
            }}
          />

参考:https://reactnavigation.org/docs/native-stack-navigator/#orientation

bz4sfanl

bz4sfanl4#

因为,stack.screen的选项属性中的方向选项不起作用。我也不会用...我实施了一项工作。也就是说,我旋转了屏幕的内容90十二月。

<View style={{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }}>
   <View style={{
    padding: 50,
    transform: [{ rotate: '-90deg'}],
    width:'100%', 
    height: '100%' 
}}>
      {children} 
      </View>
    </View>
  );

相关问题