如何使 DrawerLayout 可重用？

Question

我是 ReactNavite 的新手。我在玩 Android DrawerLayout。我正在使用 StackNavigator 进行屏幕重定向。

我是否必须在每个屏幕中放置 DrawerLayoutAndroid，因为它看起来不合逻辑？我不能创建自定义 class 并在每个屏幕和某些属性（例如已选择或未选择）中使用它吗？

Screen1.js

export default class Screen1 extends Component<{}> {
  static navigationOptions = {
    header: null
  };

  onScreen1Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen1");
  }

  onScreen2Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen2");
  }

    render() {
        return (
    <DrawerLayoutAndroid
            drawerWidth={300}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => {
              return (
                <ScrollView vertical={true}>                     
                    <View style={styles.drawerMenuSelectedView}>
                      <Text
                        style={styles.menuItemSelected}
                        onPress={() => this.onScreen1Click()}
                      >
                        Screen 1
                      </Text>
                    </View>
                    <View style={styles.drawerMenuUnselectedView}>
                      <Text
                        style={styles.menuItemUnselected}
                        onPress={() => this.onScreen2Click()}
                      >
                       Screen 2
                      </Text>
                    </View>
                </ScrollView>
              );
            }}
            ref={"NAVDRAWER"}
          >
            <View>
      <Text> Screen 1 </Text>
                </View>
    </DrawerLayoutAndroid>
    );  }
}

Screen2.js

export default class Screen2 extends Component<{}> {
  static navigationOptions = {
    header: null
  };

  onScreen1Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen1");
  }

  onScreen2Click() {
    this.refs["NAVDRAWER"].closeDrawer();
    this.props.navigation.navigate("screen2");
  }

    render() {
        return (
    <DrawerLayoutAndroid
            drawerWidth={300}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => {
              return (
                <ScrollView vertical={true}>                     
                    <View style={styles.drawerMenuSelectedView}>
                      <Text
                        style={styles.menuItemUnselected}
                        onPress={() => this.onScreen1Click()}
                      >
                        Screen 1
                      </Text>
                    </View>
                    <View style={styles.drawerMenuUnselectedView}>
                      <Text
                        style={styles.menuItemSelected  }
                        onPress={() => this.onScreen2Click()}
                      >
                       Screen 2
                      </Text>
                    </View>
                </ScrollView>
              );
            }}
            ref={"NAVDRAWER"}
          >
            <View>
      <Text> Screen 2 </Text>
                </View>
    </DrawerLayoutAndroid>
    );  }
}

App.js

import React, { Component } from 'react';
import { StackNavigator } from "react-navigation";
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";

export default class App extends Component<Props> {
  render() {
    return (
      <MyApp />
    );
  }
}

const MyApp = StackNavigator({

  screen1: { screen: Screen1 },
  screen2: { screen: Screen2 },
});

Answer 1

经过长时间的研究，我找到了这个带有可重用抽屉的抽屉导航库，

https://github.com/react-navigation/react-navigation

这个库提供了 DrawerNavigator ，它也可以帮助我们进行自定义抽屉设计，您可以在 DrawerNavigator 中添加抽屉的屏幕...

另外，我参考了这篇博客

https://codeburst.io/custom-drawer-using-react-navigation-80abbab489f7

希望对您有所帮助...

如何使 DrawerLayout 可重用？

How can i make DrawerLayout reusable?

android

drawerlayout

react-native