0

我正在使用 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 />;
  }
}

4

1 回答 1

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

您应该使用 createDrawerNavigator 而不是 DrawerNavigator。我实际上不明白“当它运行时，应用程序 UI 显示“page1”而不是显示 2 个绘制项 'page1' 和 'page1'”是什么意思

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

您可以在此处阅读有关抽屉导航器的更多信息： https ://reactnavigation.org/docs/en/drawer-navigator.html

于 2018-11-28T10:39:11.010 回答