错误：未定义不是函数本机

Question

我正在编写我的第一个React本机应用程序，并且在执行代码时收到以下错误消息，

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

我们应该使用StackNavigator和createStackNavigator。根createAppContainer需要包装在navigator中。

然后将其包裹起来，就可以将其放入createAppContainer的{​​{1}}函数中

所以您的代码应如下所示。

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。

documentation给出了以下步骤：

1. v3+
2. react-native-gesture-handler

对于iOS而言，对于Android需要进行一些其他更改。在npm install --save react-native-gesture-handler中。

react-native link react-native-gesture-handler