时间戳

首页 > 解决方案 > 即使遵循 react-navigation 文档，react-navigation 也无法在屏幕之间导航

javascript - 即使遵循 react-navigation 文档，react-navigation 也无法在屏幕之间导航

问题描述

我正在从 react-navigation 关注这个文档来学习，我正在尝试和尝试，但我无法在屏幕之间导航。每次我更改某些内容时，都会弹出一个随机错误。<HomeScreen/>如果我在 App.js 的根目录中只调用一个屏幕，则 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 is not an object，有时它找不到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;

标签： javascriptreactjsreact-nativereact-navigation

解决方案

您需要像这样使用 createAppContainer 定义一个 AppContainer（什么是 AppContainers）

const AppContainer = createAppContainer(RootStack);

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

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

const AppContainer并在 App.js 中添加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'

推荐阅读