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;

無需特殊實施即可輕松操作。

如果您有任何進一步的意見，請發表評論。 如果我的答案很好，請做出選擇。