javascript - React Navigation Invarint Violation

Question

I recently started to use React Navigation to go beetween screens. I'm stuck on an error and can't go foward. I'm no sure if it's an error of my project or I'm missing some crucial stuff. I'm tried to reproduce the code from the docs, but didn't work.

Here's the error:

My App.js:

import React from 'react';
import {View, Text, Button} from "react-navigation";
import { createAppContainer, createStackNavigator,  StackActions, NavigationActions } from 'react-navigation';

class LoginScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Home' })
              ],
            }))
          }}
        />
      </View>
    );
  }  
}

class HomeScreen extends React.Component {
  render(){
    return(
      <View>
        <Text>
          Home Screen
        </Text>
      </View>
    );
  }
}


const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Login: {
    screen: LoginScreen,
  },
}, {
    initialRouteName: 'Login',
});

export default createAppContainer(AppNavigator);

This is my index.js:

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';


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

This is my MainActivity.java with all the necessary modifications:

package com.ggwpapplication;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "ggWPapplication";
    }

    @Override
      protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
          @Override
          protected ReactRootView createRootView() {
           return new RNGestureHandlerEnabledRootView(MainActivity.this);
          }
        };
     }
}

Note: Before using React Navigation it was all fine.

标签： javascriptandroidreact-nativereact-navigation

Answer 1

您的 App.js 文件中有错误的导入：

改变：

import {View, Text, Button} from "react-navigation";

至：

import {View, Text, Button} from "react-native";