即使按照 react-navigation 文档操作,react-navigation 也无法在屏幕之间导航
2019-11-24
52
我正在按照 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;
但是当我单击按钮时,会弹出一个随机
错误
,有时它说未定义不是一个对象,有时它找不到
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;
1个回答
您需要像这样使用 createAppContainer 定义一个 AppContainer( 什么是 AppContainers )
const AppContainer = createAppContainer(RootStack);
并且 RootStack 将是您想要显示的屏幕列表。使用 createStackNavigator( 什么是 createStackNavigator ) 像这样添加它们:
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
并在 App.js 中添加
const AppContainer
和
const 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'
2019-11-24