如何使DrawerLayout可重复使用？

Question

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

我是否必须在每个屏幕中放置DrawerLayoutAndroid，因为它似乎不符合逻辑？我无法创建自定义类并在每个屏幕中使用它以及某些属性（如已选择或未选择）？

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 },
});