React Native和React导航出错

Question

我正在尝试学习React Native，却被React导航卡住了。我已经安装了NPM和expo CLI。还按照react文档创建了React项目。但是当我试图创建屏幕之间的导航时，在expo移动客户端上得到了这个错误-

​

我不确定我做错了什么。我在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导航V3与用于V2的代码一起使用。V3需要a container。

要么降级到V2，要么添加容器。