即使遵循了反应导航文档，反应导航也无法在屏幕之间导航

Question

我正在按照这个文档从反应导航来学习，我正在尝试和尝试，但我无法在屏幕之间导航。每次我更改某些内容时，都会弹出一个随机错误。如果我只调用一个屏幕作为 App.js 根目录内的<HomeScreen/>，则应用程序.js运行良好。

我像这样调用主屏幕：

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;

但是当我单击按钮时会弹出一个随机错误，有时它说未定义不是对象，有时找不到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;

Answer 1

你需要像这样使用 createAppContainer 定义一个 AppContainer(什么是 AppContainers(

const AppContainer = createAppContainer(RootStack);

那里的RootStack将是您要显示的屏幕列表。 像这样使用 createStackNavigator(什么是 createStackNavigator(添加它们，如下所示：

const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);

并在 App 中添加const AppContainer和const RootStack.js然后导出class App如下所示：

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

如果屏幕位于不同的文件中，请说./Comps/HomeScreen.js或./Comps/DetailsScreen.js然后在创建屏幕之前将它们导入应用程序中.js像这样：

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