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

【问题标题】：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，有人有答案吗？

标签： typescript react-native rotation screen-rotation

【解决方案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'}], 一样旋转了整个视图。我知道这不是答案，但至少在我的情况下（带有选择选项的交互式视频），这是一个可以接受的替代方案，特别是因为应用程序的其余部分处于纵向模式。

【讨论】：