[英]react-navigation can't navigate between screens even after following react-navigation docs
我正在从 react-navigation 关注这个文档来学习,我正在尝试和尝试,但我无法在屏幕之间导航。 每次我更改某些内容时,都会弹出一个随机错误。 如果我在 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;
但是当我点击按钮时会弹出一个随机错误,有时它说 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;
您需要像这样使用 createAppContainer 定义一个 AppContainer(什么是 AppContainers )
const AppContainer = createAppContainer(RootStack);
RootStack 将是您要显示的屏幕列表。 使用 createStackNavigator(什么是 createStackNavigator )像这样添加它们,如下所示:
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
并在const AppContainer
添加const AppContainer
和const RootStack
RootStack,然后像这样导出class App
:
export default class App extends React.Component {
render() {
return <AppContainer/>;
}
如果屏幕在不同的文件中,比如./Comps/HomeScreen.js
或./Comps/DetailsScreen.js
然后在创建屏幕之前将它们导入 App.js。 像这样:
import HomeScreen from './Comps/HomeScreen';
import DetailsScreen from './Comps/DetailsScreen'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.