javascript - react-navigationnative error: viewmanagerresolver returned null for either RNSScreenContentWrapper or RCTRNSScreenC

admin管理员组

文章数量:1426058

In a fresh created react native project, bootstrapped using @react-native-munity/cli, I installed @react-navigation/native-stack guided by youtube video. I ended up with code:

import {NavigationContainer} from "@react-navigation/native"
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import WeleReactNative from "./screens/WeleReactNative.tsx";

const Stack = createNativeStackNavigator()

function App(): React.JSX.Element {

    return (
        // <WeleReactNative/>
        <NavigationContainer>
            <Stack.Navigator initialRouteName='WeleReactNative'>
                <Stack.Screen name='WeleReactNative' ponent={WeleReactNative}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

It didn't work. Error pop up in emulator from with I can't copy text .

without navigation prj runs fine

return (
        <WeleReactNative/>
        // <NavigationContainer>
        //     <Stack.Navigator initialRouteName='WeleReactNative'>
        //         <Stack.Screen name='WeleReactNative' ponent={WeleReactNative}/>
        //     </Stack.Navigator>
        // </NavigationContainer>
    );

I want to add navigation functionality, but I am not sure how to move forward. After error message showing, I have to press"a - run on Android" in Metro console, in order to be able to run the app again. Creating new prj from start does not help.

my package.json

{
  "name": "RN_LSA",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "react": "18.3.1",
    "react-native": "0.76.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-munity/cli": "15.0.1",
    "@react-native-munity/cli-platform-android": "15.0.1",
    "@react-native-munity/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

GitHub

In a fresh created react native project, bootstrapped using @react-native-munity/cli, I installed @react-navigation/native-stack guided by youtube video. I ended up with code:

import {NavigationContainer} from "@react-navigation/native"
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import WeleReactNative from "./screens/WeleReactNative.tsx";

const Stack = createNativeStackNavigator()

function App(): React.JSX.Element {

    return (
        // <WeleReactNative/>
        <NavigationContainer>
            <Stack.Navigator initialRouteName='WeleReactNative'>
                <Stack.Screen name='WeleReactNative' ponent={WeleReactNative}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

It didn't work. Error pop up in emulator from with I can't copy text .

without navigation prj runs fine

return (
        <WeleReactNative/>
        // <NavigationContainer>
        //     <Stack.Navigator initialRouteName='WeleReactNative'>
        //         <Stack.Screen name='WeleReactNative' ponent={WeleReactNative}/>
        //     </Stack.Navigator>
        // </NavigationContainer>
    );

I want to add navigation functionality, but I am not sure how to move forward. After error message showing, I have to press"a - run on Android" in Metro console, in order to be able to run the app again. Creating new prj from start does not help.

my package.json

{
  "name": "RN_LSA",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "react": "18.3.1",
    "react-native": "0.76.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-munity/cli": "15.0.1",
    "@react-native-munity/cli-platform-android": "15.0.1",
    "@react-native-munity/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

GitHub

• javascript
• react-native
• metro-bundler
• react-navigation-native-stack

Share Improve this question Follow edited Dec 24, 2024 at 12:17 AntiRakPro asked Dec 21, 2024 at 20:53 AntiRakProAntiRakPro 5122 silver badges55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

npm install react-native-reanimated react-native-screens react-native-safe-area-context

this will update safe area contex and screens to latest version but your dependencies is going to increase way to more you know

so you have to have total these much dependencies to workout with stack navigation

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
npm install react-native-reanimated

You will need to build the project again, for the change to apply

本文标签：