Ошибка: undefined не является функцией реагирования

Question

Я пишу свое первое приложение React-native и получаю следующее сообщение об ошибке при выполнении кода:

App.js:

import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './App/components/Login.js';

const Application = StackNavigator({
  Home: { screen: Login },
}, {
    navigationOptions: {
      header: false,
    }
  });

export default class App extends Component {
render() {
    return (
       <Application />
    );
  }
}

Login.js:

import React,{Component} from 'react';
import{
    View,
    Text,
    Stylesheet
} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class Login extends Component{
    render(){
        return(
            <Text>Test</Text>
        );
    }
}

Answer 1

Вы должны экспортировать createAppContainer, а также StackNavigator устарело использовать createStackNavigator
Попробуйте это:

import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from './App/components/Login.js';

const Application = createStackNavigator({
  Home: { screen: Login },
}, {
    navigationOptions: {
      header: false,
    }
  });

class App extends Component {
render() {
    return (
       <Application />
    );
  }
}
export default createAppContainer(Application);

Answer 2

В документации здесь показано, как правильно установить StackNavigator.

Мы должны использовать createStackNavigator и createAppContainer.Корень navigator должен быть обернут внутри createAppContainer.

Затем, как только он будет упакован, вы можете поместить его в функцию render вашего App.js

Таким образом, ваш код должен выглядеть примерно так:

import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // use the correct imports
import Login from './App/components/Login.js';

// create the stack navigator
const MyStackNavigator = createStackNavigator({
  Home: { screen: Login },
}, {
    navigationOptions: {
      header: false,
    }
  });

// create the AppContainer
const Application = createAppContainer(MyStackNavigator); 

export default class App extends Component {
render() {
    return (
       <Application />
    );
  }
}

Также в вашем Login.js вы импортируете StackNavigator, вы можете удалить этот импорт, поскольку вы, похоже, не используете его.

---

Если вы используете react-navigation v3+, то вынеобходимо убедиться, что у вас также установлена ​​react-native-gesture-handler.

Документация дает следующие шаги:

1. npm install --save react-native-gesture-handler
2. react-native link react-native-gesture-handler

Для iOS, то есть для Android есть некоторые дополнительные изменения.В MainActivity.java.

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

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

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