错误：undefined不是函数react-native

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

文档here向您展示如何正确设置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。

documentation给出如下步骤：

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