反应导航即使在跟随反应导航文档之后也无法在屏幕之间导航

Question

我正在从反应导航中跟踪this文档以进行学习，虽然我正在尝试并尝试尝试，但是我无法在屏幕之间进行导航。每次我更改某些内容时，都会弹出一个随机错误。如果我仅在App.js根目录中以<HomeScreen/>的形式调用一个屏幕，则App.js运行良好。

我这样拨打HomeScreen：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomeScreen from './Comps/HomeScreen';
import { StackNavigator } from 'react-navigation';
import DetailsScreen from './Comps/DetailsScreen';

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



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

现在可以正常工作，显示HomeScreen.js中的内容>

 import React from 'react';
 import { StyleSheet, Text, View, SafeAreaView, Button } from 'react-native';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import { createAppContainer, navigation } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';

 class HomeScreen extends React.Component {
     render() {
       return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
           <Text>Home Screen</Text>
           <Button
             title="Go to Details"
             onPress={() => this.props.navigation.navigate('Details')}
           />
         </View>
       );
     }
   }

 export default HomeScreen;
但是当我单击按钮时，会弹出一个随机的[[error

，有时它说undefined不是对象，有时找不到StackNavigator，有时导航有问题。我安装了所有依赖项，但仍然请告诉我我是否在这里缺少任何内容。[从HomeScreen.js发给我的电话是DetailsScreen.js，如文档中所述。

 import React from 'react';
 import { StyleSheet, Text, View, SafeAreaView, Button } from 'react-native';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import { createAppContainer, navigation } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { withNavigation } from 'react-navigation';


 class DetailsScreen extends React.Component {
     render() {
         return (
             <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                 <Text>Details Screen</Text>
                 <Button
                     title="Go to Details... again"
                     onPress={() => this.props.navigation.navigate('Details')}
                 />
             </View>
         );
     }
 }
 export default DetailsScreen;

我正在从反应导航中跟踪此文档以进行学习，虽然我正在努力，但是无法在屏幕之间进行导航。每次我更改某些内容时，都会弹出一个随机错误。 App.js正在运行...

Answer 1

您需要使用createAppContainer这样定义一个AppContainer（What is AppContainers）