React Native和React Navigation错误

Question

我试图学习React Native并被React Navigation卡住了。我已经安装了NPM和EXPO CLI。还遵循了react文档来创建React Project。但是，当我尝试在屏幕之间创建导航时，expo mobile客户端上出现了此错误-

我不确定自己在做什么错。我在StackOverflow上搜索了几个小时，但没有一个解决方案起作用。我正在寻求专家的指导。在下面粘贴源代码-

======    
App.js
======
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import HomeScreen from './screen/HomeScreen';
import DetailsScreen from './screen/DetailsScreen';

const AppStackNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Details: {
    screen: DetailsScreen
  },
});

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


=============
HomeScreen.js
=============
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

/* StyleSheet */
const styles = StyleSheet.create({
  mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default HomeScreen;


================
DelaitsScreen.js
================
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

/* StyleSheet */
const styles = StyleSheet.create({
  mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

export default DetailsScreen;

对于专家，如果有人可以向正确的方向推动我，我将永远感激不已。 ：）

谢谢。

Answer 1

您的应用程序崩溃，因为您似乎正在将React Navigation V3与适用于V2的代码一起使用。 V3需要a container。

降级到V2或添加容器。