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

Question

我尝试在网络视图中使用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

如果准备好使用本机堆栈

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