Реагировать Навигация Инвариант

Question

Я недавно начал использовать React Navigation для перехода между экранами. Я застрял на ошибке и не могу идти вперед. Я не уверен, что это ошибка моего проекта или я упускаю некоторые важные вещи. Я пытался воспроизвести код из документов, но не получилось.

Вот ошибка:

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);

Это мой index.js:

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


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

Это мой MainActivity.java со всеми необходимыми модификациями:

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);
          }
        };
     }
}

Примечание: до использования React Navigation все было хорошо.

Answer 1

вы неправильно импортировали файл App.js:

измените:

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

на:

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