Question

我正在尝试创建简单的DrawerNavigator。却没有出现：（

import React, { Component } from 'react';
import { Text } from 'react-native';
import { createAppContainer, createDrawerNavigator } from 'react-navigation';

class One extends Component {
    render() {
        return (<Text>One</Text>);
    }
}

class Two extends Component {
    render() {
        return (<Text>Two</Text>);
    }
}

const DrawerStack = createDrawerNavigator(
    {
        One: {screen: One},
        Two: {screen: Two},
    }, {
    }
);

const App = createAppContainer(DrawerStack);
export default App;

这就是我看到的（没有显示抽屉导航）：

Answer 1

从左侧滑动，您将看到抽屉导航功能
默认情况下，react-navigation createDrawerNavigator不提供堆栈导航，如果要查看带有菜单图标的标题，则必须使屏幕（一两个）成为stackNavigation。

NB：从expo或react-native-icons导入图标

已更新：：使用基于本地的

安装本机基础（** npm install native-base --save **）

从本机库导入标题，图标，容器，左侧，内容

Class One扩展了组件{

render() {
    return (
          <Container>
              <Header>
                <Left>
                  <Icon name="md-menu" onPress={() => this.props.navigation.openDrawer()} />
                </Left>
              </Header>

              <Content>
                <Text>Screen One</Text>
              </Content>
          </Container>
      );
}

}

第二类扩展了组件{

render() {
     return (
          <Container>
              <Header>
                <Left>
                  <Icon name="md-menu" onPress={() => this.props.navigation.openDrawer()} />
                </Left>
              </Header>

              <Content>
                <Text>Screen Two</Text>
              </Content>
          </Container>
      );
}

}

const DrawerStack = createDrawerNavigator（ { 一个：{screen：One}，两个：{screen：两个} }，{

} ）;

Answer 2

抽屉滑动手势不起作用，因为在新版本的React Navigation v3 npm中。我们需要分别安装react-native-gesture-handler npm。他们创建了单独的npm包，用于触摸和手势处理和识别。

第1步。

npm i react-native-gesture-handler

第2步。

react-native link react-native-gesture-handler

第3步（可选）

如果第2步无法正常工作，则代码配置正确

要完成Android的react-native-gesture-handler的安装，请确保对MainActivity.java进行必要的修改：

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

iOS不需要其他步骤。

请参阅以下文档以获取更多信息：-

Answer 3

利用本机基础很好。

相关链接为here.

导航链接为here.

您还可以在此处看到该组件，以便可以使用所需的功能。

抽屉导航example.js：

import React, { Component } from "react";
import HomeScreen from "./HomeScreen.js";
import MainScreenNavigator from "../ChatScreen/index.js";
import Profile from "../ProfileScreen/index.js";
import SideBar from "../SideBar/SideBar.js";
import { DrawerNavigator } from "react-navigation";
const HomeScreenRouter = DrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Chat: { screen: MainScreenNavigator },
    Profile: { screen: Profile }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);
export default HomeScreenRouter;

易于操作，无需特殊实施。

如果还有其他意见，请发表评论。如果我的回答是好的，请做出选择。

React-Native DrawerNavigator没有显示

3 个答案: