React-native DrawerNavigator不会显示

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

1. 从左侧滑动，您将看到drawerNavigation正常工作

2. react-navigation createDrawerNavigator默认情况下不提供堆栈导航，如果您要查看带有菜单图标的标题，则必须使您的屏幕（一，二）为stackNavigation。

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

更新::使用native-base

1. 安装native-base（** npm install native-base --save **）

2. 导入标题，图标，容器，左，内容来自本机

   第一类扩展组件{

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

   }

   第二类扩展Component {

    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（{one：{screen：One}，two：{screen：Two}}，{

   }）;

Answer 2

抽屉滑动手势不起作用，因为在新版本的反应导航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无需其他步骤。

有关更多信息，请参阅以下文档： -

1. https://reactnavigation.org/docs/en/getting-started.html#installation

2. https://www.npmjs.com/package/react-native-gesture-handler/v/1.0.0-alpha.34?activeTab=readme

3. https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Answer 3

利用原生基地是很好的。

相关链接在这里。

导航链接在这里。

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

抽屉导航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;

无需特殊实施即可轻松操作。

如果您有任何进一步的意见，请发表评论。 如果我的答案很好，请做出选择。