如何在本机反应中解锁一个屏幕上的旋转

Posted 2023-04-18

【中文标题】如何在本机反应中解锁一个屏幕上的旋转

【英文标题】：How to unlock rotation on one screen in react native

【发布时间】：2020-05-12 15:19:50

【问题描述】：

我尝试在 webview 中使用 react-native-orientation 以使其成为唯一可以旋转的视图。

import React, useEffect from 'react';
import  WebView  from 'react-native-webview';
import Orientation from "react-native-orientation"

export function GameWebViewScreen(navigation) 
const link = ****

useEffect(() => 
    Orientation.unlockAllOrientations();
, [])

return <WebView source=uri: link/>

我收到 TypeError: null in not an object on unlockAllOrientations 调用。有谁知道这是一个问题，因为我没有按照说明here 中的说明配置本机文件，因为我还没有访问权限，或者？

我也尝试过使用类组件并得到了相同的结果。

我也愿意接受有关控制单个视图旋转的库的任何其他建议。

【问题讨论】：

对于这个 EXACT 问题，除了简单的 React，有人有答案吗？

【参考方案1】：

您需要按照说明设置本机文件并尝试执行manual linking。

监听 React Native 应用程序中的设备方向变化，并以编程方式为每个屏幕设置首选方向。适用于 android 和 ios。

示例：-

import Orientation from 'react-native-orientation'

componentDidMount() 
   Orientation.unlockAllOrientations();


componentWillUnmount() 
   Orientation.lockToPortrait();

您需要在 ios

中设置应用委托如下

#import "Orientation.h"

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window 
  return [Orientation getOrientation];

Android需要设置Orientation Package

在MainActivity.java中实现onConfigurationChanged方法

import android.content.Intent; // <--- import 
import android.content.res.Configuration; // <--- import 

public class MainActivity extends ReactActivity 
  @Override
  public void onConfigurationChanged(Configuration newConfig) 
     super.onConfigurationChanged(newConfig);
     Intent intent = new Intent("onConfigurationChanged");
     intent.putExtra("newConfig", newConfig);
     this.sendBroadcast(intent);
  

您可以在这里找到更多信息react-native-orientation

【参考方案2】：

如果准备好使用 native-stack

在 React Navigation v6 中使用下面的 import

import  createNativeStackNavigator  from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

function MyStack() 
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component=Home/>
      <Stack.Screen 
        name="Website" 
        component=Website 
        options=orientation: 'all' 
      />
    </Stack.Navigator>
  );

在 React Navigation v5 中使用下面的 import

import  createNativeStackNavigator  from 'react-native-screens/native-stack';
const Stack = createNativeStackNavigator();

function MyStack() 
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component=Home/>
      <Stack.Screen 
        name="Website"
        component=Website 
        options=screenOrientation: 'all' 
      />
    </Stack.Navigator>
  );

【参考方案3】：

我使用的是useEffect 而不是component...Mount，我没有设法只将单个屏幕锁定为横向，然后再返回纵向。我真的尝试了所有方法，例如：addOrientationListener、unlockAllOrientations、Xcode 中的配置等，但它只是没有用。

出于绝望，我终于像transform: [rotate: '90deg'], 一样旋转了整个视图。我知道这不是答案，但至少在我的情况下（带有选择选项的交互式视频），这是一个可以接受的替代方案，特别是因为应用程序的其余部分处于纵向模式。