javascript - React 导航不变性违规

Question

我最近开始使用 React Navigation 在屏幕之间移动。我陷入了错误并且无法继续。我不确定这是我的项目的错误还是我遗漏了一些重要的东西。我尝试从文档中重现代码，但没有成功。

错误如下:

我的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";