[英]'Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.' error in react native cli
I keep getting RNSScreen error.我不断收到 RNSScreen 错误。 I have followed all instructions on react-navigation guide but nothing has worked for me.
我已按照反应导航指南中的所有说明进行操作,但对我没有任何帮助。
Looks like native packages are not linked automatically.看起来本机包没有自动链接。 So try this
所以试试这个
Note : In your case it can be
'../'
instead of'../../../'
because I am using Monorepo.注意:在您的情况下,它可以是
'../'
而不是'../../../'
,因为我使用的是 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/'
Then Install pods然后安装 pod
yarn podinstall
Then terminate already running MetroBundler terminal.然后终止已经运行的 MetroBundler 终端。 And, build app again
并且,再次构建应用程序
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);
Make sure
import 'react-native-gesture-handler';
确保
import 'react-native-gesture-handler';
is the top是顶部
I had this error and was doing expo start --dev-client
and when I just did expo start
it works.我遇到了这个错误,并且正在执行
expo start --dev-client
,当我刚刚expo start
它时它可以工作。 Go figure. Go 图。
For those who are getting this error when working in a monorepo (@nrwl/nx for me), this solution worked for me.对于那些在 monorepo 中工作时遇到此错误的人(对我来说是@nrwl/nx),这个解决方案对我有用。
https://github.com/nrwl/nx-react-native/issues/98#issuecomment-995299032 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. 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": "*"
Try below steps尝试以下步骤
First stop the metro先停地铁
Delete the "node_modules" folder删除“node_modules”文件夹
Run below commands respectively分别运行以下命令
npm install, npx react-native start, npx react-native run-ios npm 安装、npx react-native 启动、npx react-native run-ios
There were many answers that didn't work for me.有很多答案对我不起作用。 Finally I found this was related to react-native-screens package configuration.
最后我发现这与 react-native-screens 包配置有关。
On iOS obtaining current device orientation requires asking the system to generate orientation notifications.在 iOS 上获取当前设备方向需要要求系统生成方向通知。 Our library uses them to enforce correct interface orientation when navigating between screens.
我们的库使用它们在屏幕之间导航时强制执行正确的界面方向。 To make sure that there are no issues with screen orientation you should put following code in your AppDelegate.m:
为确保屏幕方向没有问题,您应该将以下代码放入 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
}
Reference: https://www.npmjs.com/package/react-native-screens参考: https ://www.npmjs.com/package/react-native-screens
If anyone is using nx ( https://nx.dev/ ).如果有人在使用 nx ( https://nx.dev/ )。 My solution is:
我的解决方案是:
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.在应用程序的 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": "*"
More about: https://github.com/nrwl/nx-react-native/issues/98#issuecomment-995299032更多关于: https ://github.com/nrwl/nx-react-native/issues/98#issuecomment-995299032
If you're using nx expo, you should be to intall libraries using:如果您使用的是 nx expo,则应该使用以下方法安装库:
nx run <APP_NAME>:install react-native-safe-area-context
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.