drawerNavigator header 未显示

drawerNavigator header not showing

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

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

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

如果有人得到了类似的东西,你能帮忙吗?谢谢!

这是我的 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;

它说 here 可触摸高亮应该只有一个 child。 但是您已将 onPress 作为其中的属性传递。这可能是问题所在。

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

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