Question

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

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;

Answer 1

它说here可触摸的高光应该只有一个孩子。但是你已经将onPress作为一个属性传递给它。这可能是个问题。

react native docs为TouchableHighlight提到了这种语法。如果您希望使用多个子元素，请将它们包装在视图中。

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

drawerNavigator标头没有显示

1 个答案: