如何在嵌套的抽屉/堆栈导航中包含 menuIcon 以切换抽屉导航器？答案

【问题标题】：How to include menuIcon to toggle drawerNavigator in nested Drawer/Stack navigation?如何在嵌套的抽屉/堆栈导航中包含 menuIcon 以切换抽屉导航器？
【发布时间】：2019-04-17 20:44:45
【问题描述】：

我有一个抽屉导航器，里面有 2 叠。我希望每个堆栈的第一个屏幕在标题中显示汉堡包图标，但是当移动到堆栈中的第二个屏幕时，我希望将汉堡包替换为后退按钮。

如何将抽屉连接到此切换按钮，并使其仅显示在堆栈中的第一个屏幕上？

在编辑堆栈中的第一个屏幕以包含切换按钮时，我没有得到任何响应。我遵循了

中详述的过程

Add hamburger button to React Native Navigation

这是我最好的尝试：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createStackNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';

/-------------屏幕-----------/

class FirstScreen extends React.Component {
  static navigationOptions = function(props) {
    return {
      title: '',
      headerLeft: <Button onPress={() => props.navigation.navigate('DrawerNavigator')} title= "=" />
    }
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'teal' }}>
        <Text style={styles.text}>FirstScreen</Text>
        <Button
          title="Next"
          onPress={() => this.props.navigation.navigate('Second')}
        />
      </View>
    );
  }
}

class SecondScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 
'center', backgroundColor:'pink' }}>
        <Text>Second Screen</Text>
        <Button
      title="Next"
      onPress={() => this.props.navigation.navigate('Third')}
        />
      </View>
    );
  }
}

class ThirdScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor:'coral'  }}>
        <Text>Third Screen</Text>
        <Button
          title="Next"
          onPress={() => this.props.navigation.navigate('First')}
        />
      </View>
    );
  }
}

class FourthScreen extends React.Component {
  static navigationOptions = function(props) {
    return {
      title: '',
      headerLeft: <Button onPress={() => props.navigation.navigate('DrawerNavigator')} title= "=" />
    }
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'orange' }}>
        <Text style={styles.text}>4th Screen</Text>
        <Button
          title="Next"
          onPress={() => this.props.navigation.navigate('Fifth')}
        />
      </View>
    );
  }
}

class FifthScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 
'center', backgroundColor:'purple' }}>
        <Text>5th Screen</Text>
        <Button
          title="Next"
          onPress={() => this.props.navigation.navigate('Sixth')}
        />
      </View>
    );
  }
}

class SixthScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor:'lightblue'  }}>
        <Text>6th Screen</Text>
        <Button
          title="Next"
          onPress={() => this.props.navigation.navigate('Fourth')}
        />
      </View>
    );
  }
}

/---------------堆栈导航器-------------/

const StackNavigator1 = createStackNavigator({
  First: {screen: FirstScreen},
  Second: {screen: SecondScreen},
  Third: {screen: ThirdScreen}
});

const StackNavigator2 = createStackNavigator({
  Fourth: {screen: FourthScreen},
  Fifth: {screen: FifthScreen},
  Sixth: {screen: SixthScreen}
});

/------------- 抽屉导航器-------------/

const DrawerNavigator =  createDrawerNavigator(
  {
    StackNavigator1: {
      screen: StackNavigator1
    },
   StackNavigator2: {
      screen: StackNavigator2
    }
  }
);


export default createAppContainer(DrawerNavigator);


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

【问题讨论】：

标签： react-navigation react-navigation-stack react-navigation-drawer

【解决方案1】：

你可以尝试做这样的事情

将自定义组件作为标题标题添加到每个第一个堆栈导航器

const LogoTitle = props => {
    return (
      <TouchableOpacity
        style={{flexDirection: 'row'}}
        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
        <Entypo name={'menu'} size={25} color={'black'} />
        <Text style={{fontSize: 18, fontWeight: '400', marginLeft: 10}}>
          Home
        </Text>
      </TouchableOpacity>
    );
  };


<Stack.Screen
        options={{
          headerTitle: props => <LogoTitle {...props} />,
        }}
        name={'Home'}
        component={HomeScreen}
      />

您将获得导航对象作为堆栈导航器的道具。

希望它能提供一些想法。

【讨论】：