使用DrawerNavigator作为主UI，应用程序始终输入默认项目屏幕而不显示抽屉项目

Posted 2021-04-04

我正在使用ReactNative和React-Navigation开发一个应用程序。

我将DrawerNavigator设置为主UI。

但是当应用程序启动时，它将始终进入默认项目屏幕，而不显示抽屉项目。

我错过了什么？

---

反应导航版：“2.18.2”

App.js的代码如下。当它运行时，App UI显示“page1”而不是显示2个绘制项'page1'和'page1'

import React, {Component} from 'react';
import {Text,  View} from 'react-native';

import { DrawerNavigator } from 'react-navigation';


class Page1 extends Component {
  render () {
    return (
      <View style={{padding: 50}}>
        <Text>
          Page1
        </Text>
      </View>
    );
  }
}

class Page2 extends Component {
  render () {
    return (
      <View style={{padding: 50}}>
        <Text>
          Page2
        </Text>
      </View>
    );
  }
}


const DrawerNavi = DrawerNavigator({
  Page1: {
    screen: Page1
  },
  Page2: {
    screen: Page2
  }
});

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

答案

const DrawerNavi = createDrawerNavigator({
  Page1: {
    screen: Page1
  },
  Page2: {
    screen: Page2
  }
});

您应该使用createDrawerNavigator而不是DrawerNavigator。我实际上并不明白你的意思是“当它运行时，App UI显示”page1“而不是显示2个绘图项'page1'和'page1'”

drawerNavigator将在左侧或右侧显示您的drawerItems（取决于您要放置它的位置），然后您可以向左/向右滑动以访问它。它还要求您有一个默认屏幕。您可以通过将initialRouteName传递给组件来更改此默认屏幕。

您可以在这里阅读有关drawerNavigator的更多信息：https://reactnavigation.org/docs/en/drawer-navigator.html