“不變違規：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