[英]react-navigation can't navigate between screens even after following react-navigation docs
I am following this doc from react-navigation to learn and I am trying and trying but I can't navigate between screens.我正在从 react-navigation 关注这个文档来学习,我正在尝试和尝试,但我无法在屏幕之间导航。 Each time I change something a random error is popping up.
每次我更改某些内容时,都会弹出一个随机错误。 App.js is running fine if I call just one screen as
<HomeScreen/>
inside the root of App.js.如果我在 App.js 的根目录中仅将一个屏幕称为
<HomeScreen/>
则 App.js 运行良好。
I am calling HomeScreen like this:我像这样调用 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;
Now this is working fine, showing whats inside HomeScreen.js
现在这工作正常,显示
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;
but when I click on the button a random error pops up, sometimes it says undefined is not an object, sometimes it can't find StackNavigator
, sometimes it has problems with navigation.但是当我点击按钮时会弹出一个随机错误,有时它说 undefined 不是一个对象,有时它找不到
StackNavigator
,有时它有导航问题。 I installed all the dependencies but still please tell me if I am missing something here.我安装了所有依赖项,但如果我在这里遗漏了什么,请告诉我。
From HomeScreen.js
I am calling DetailsScreen.js
like said in the doc.从
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;
You need to define an AppContainer( What is AppContainers ) using createAppContainer like this您需要像这样使用 createAppContainer 定义一个 AppContainer(什么是 AppContainers )
const AppContainer = createAppContainer(RootStack);
and there RootStack will be the list of screens that you want to show. RootStack 将是您要显示的屏幕列表。 add them like this using createStackNavigator( what is createStackNavigator ) like this:
使用 createStackNavigator(什么是 createStackNavigator )像这样添加它们,如下所示:
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
and add both the const AppContainer
and const RootStack
in App.js and then export the class App
like this:并在
const AppContainer
添加const AppContainer
和const RootStack
RootStack,然后像这样导出class App
:
export default class App extends React.Component {
render() {
return <AppContainer/>;
}
If the screens are in different file, say ./Comps/HomeScreen.js
or ./Comps/DetailsScreen.js
then import them in App.js before creating the screens.如果屏幕在不同的文件中,比如
./Comps/HomeScreen.js
或./Comps/DetailsScreen.js
然后在创建屏幕之前将它们导入 App.js。 like this:像这样:
import HomeScreen from './Comps/HomeScreen';
import DetailsScreen from './Comps/DetailsScreen'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.