如何在 React Native 中解锁一个屏幕上的旋转

Question

我尝试在 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 中的说明配置本机文件，因为我还没有访问它们的权限，或者？

我也尝试了 class 组件并得到了相同的结果。

我也愿意听取有关库的任何其他建议，以控制单个视图的旋转。

Answer 1

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

监听 React Native 应用程序中的设备方向变化，并以编程方式在每个屏幕的基础上设置首选方向。适用于 Android 和 iOS。

示例：-

import Orientation from 'react-native-orientation'

componentDidMount() {
   Orientation.unlockAllOrientations();
}

componentWillUnmount() {
   Orientation.lockToPortrait();
}

您需要按照ios

中的方式设置app delegate

#import "Orientation.h"

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

Android需要设置方向包

在 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

Answer 2

如果准备好使用native-stack

在 React Navigation v6 中使用下面的导入

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 { 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>
  );
}

Answer 3

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

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

如何在 React Native 中解锁一个屏幕上的旋转

How to unlock rotation on one screen in react native

rotation

screen-rotation

typescript

react-native