抽屉导航器标题未显示答案

【问题标题】：drawerNavigator header not showing抽屉导航器标题未显示
【发布时间】：2017-07-12 14:04:18
【问题描述】：

我正在尝试使用此页面上的一些方法在我的 StackNavigator 中嵌套一个 DrawerNavigator：

https://github.com/react-community/react-navigation/issues/131

我的应用程序已加载，但标题栏中未显示任何内容。它应该有一个标题和一个图片，点击后会显示抽屉菜单。

如果有人得到这样的工作，你能帮忙吗？谢谢！

这是我的 app.js：

import Drawer from './DrawerMenu';

const diceRoller = StackNavigator({
    Home: { screen: HomeScreen },
    Drawer: { screen: Drawer }
});

AppRegistry.registerComponent('diceRoller', () => diceRoller);

export { diceRoller }

DrawerMenu.js：

import { DrawerNavigator } from 'react-navigation';
import { TouchableHighlight, Image } from 'react-native';
import MenuScreen from './MenuScreen';
import React from 'react';

const getDrawerItem = navigation => (
  <TouchableHighlight>
      <Image source={require('./images/menubars.png')} style={{width: 50, height: 50}} />
    onPress={() => {
      if (navigation.state.index === 0) {
        navigation.navigate('DrawerOpen');
      } else {
        navigation.navigate('DrawerClose');
      }
    }}
  </TouchableHighlight>
);

const getNavigationOptionsWithAction = (title, backgroundColor, color, headerLeft) => ({
  title,
  headerStyle: {
    backgroundColor,
  },
  headerTitleStyle: {
    color,
  },
  headerTintColor: color,
  headerLeft,
});

const getDrawerConfig = (drawerWidth, drawerPosition) => ({
  drawerWidth,
  drawerPosition,
});

const Drawer = DrawerNavigator ({
    MenuScreen: { screen: MenuScreen }
}, getDrawerConfig(300, 'left'));

Drawer.navigationOptions = ({ navigation }) => getNavigationOptionsWithAction('Menu', 'blue', 'white',  getDrawerItem(navigation));

export default Drawer;

【问题讨论】：

标签： react-native react-native-android react-navigation

【解决方案1】：

上面写着here，可触摸的高亮应该只有一个孩子。但是您已将onPress 作为其中的属性传递。这可能是问题所在。

React Native 文档提到了 TouchableHighlight 的这种语法。如果您希望使用多个子元素，请将它们包装在一个视图中。

<TouchableHighlight onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableHighlight>

【讨论】：