“不变违规：requireNativeComponent：在 UIManager 中找不到“RNSScreen”。” 反应本机 cli 中的错误

Question

我不断收到 RNSScreen 错误。 我已按照反应导航指南中的所有说明进行操作，但对我没有任何帮助。

Answer 1

看起来本机包没有自动链接。 所以试试这个

注意：在您的情况下，它可以是'../'而不是'../../../' ，因为我使用的是 Monorepo。

播客文件

pod 'RNScreens', :path => '../../../node_modules/react-native-screens/'
pod 'RNGestureHandler', :path => '../../../node_modules/react-native-gesture-handler/'
pod 'react-native-safe-area-context', :path => '../../../node_modules/react-native-safe-area-context/'

然后安装 pod

yarn podinstall

然后终止已经运行的 MetroBundler 终端。 并且，再次构建应用程序

yarn ios

---

工作示例

/**
 * @format
 */
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';

import SplashScreen from '../common/src/containers/splashScreen';
import LoginScreen from '../common/src/containers/loginScreen';
import LoginOTPScreen from '../common/src/containers/loginOTPScreen';
import SearchScreen from './src/searchScreen';

import React from 'react';
import {name as appName, displayName} from './app.json';
import {Provider as PaperProvider} from 'react-native-paper';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {enableScreens} from 'react-native-screens';
enableScreens();

const Stack = createStackNavigator();
const App = () => {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="SplashScreen">
          <Stack.Screen name="SplashScreen" component={SplashScreen} />
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="LoginOTPScreen" component={LoginOTPScreen} />
          <Stack.Screen name="SearchScreen" component={SearchScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
};

AppRegistry.registerComponent(appName, () => App);

确保import 'react-native-gesture-handler'; 是顶部

Answer 2

我遇到了这个错误，并且正在执行expo start --dev-client ，当我刚刚expo start它时它可以工作。 Go 图。

Answer 3

对于那些在 monorepo 中工作时遇到此错误的人（对我来说是@nrwl/nx），这个解决方案对我有用。

https://github.com/nrwl/nx-react-native/issues/98#issuecomment-995299032

Adding the following packages in the app's package.json (not the workspace root's package.json) has solved the problem for both iOS and Android.

"@react-navigation/native": "*",
"@react-navigation/native-stack": "*",
"react-native-screens": "*",
"react-native-safe-area-context": "*"

Answer 4

尝试以下步骤

• 先停地铁

• 删除“node_modules”文件夹

• 分别运行以下命令

  npm 安装、npx react-native 启动、npx react-native run-ios

Answer 5

有很多答案对我不起作用。 最后我发现这与 react-native-screens 包配置有关。

在 iOS 上获取当前设备方向需要要求系统生成方向通知。 我们的库使用它们在屏幕之间导航时强制执行正确的界面方向。 为确保屏幕方向没有问题，您应该将以下代码放入 AppDelegate.m 中：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ... 
#if !TARGET_OS_TV
    [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
#endif // !TARGET_OS_TV
    ...
    return YES:
}

- (void)applicationWillTerminate:(UIApplication *)application
{
#if !TARGET_OS_TV
    [[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
#endif // !TARGET_OS_TV
}

参考： https ://www.npmjs.com/package/react-native-screens

Answer 6

如果有人在使用 nx ( https://nx.dev/ )。 我的解决方案是：

在应用程序的 package.json（不是工作区根目录的 package.json）中添加以下包解决了 iOS 和 Android 的问题。

"@react-navigation/native": "*",
"@react-navigation/native-stack": "*",
"react-native-screens": "*",
"react-native-gesture-handler": "*",
"react-native-safe-area-context": "*"

更多关于： https ://github.com/nrwl/nx-react-native/issues/98#issuecomment-995299032

Answer 7

如果您使用的是 nx expo，则应该使用以下方法安装库：

nx run <APP_NAME>:install react-native-safe-area-context