Question

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

2020-01-27

14552

typescript react-native rotation screen-rotation

我尝试在 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}}/>
}

我在 unlockAllOrientations 调用中收到 TypeError: null in not an object。有人知道这是不是因为我还没有按照说明此处中所述配置本机文件而导致的问题，因为我还没有访问它们？

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

我也欢迎任何其他有关控制单个视图旋转的库的建议。

Answer 1

如果准备使用 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>
  );
}

Answer 2

您需要根据说明设置本机文件并尝试执行手动链接。

监听 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

Answer 3

我使用 useEffect 而不是 component...Mount ，但我没能将单个屏幕锁定为横向模式，然后再恢复为纵向模式。我真的尝试了所有方法，例如： addOrientationListener 、 unlockAllOrientations 、Xcode 中的配置等，但就是不起作用。

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