drawerNavigator Header nicht angezeigt

Question

Ich bin ein DrawerNavigator in meinem StackNavigator mit ein paar der Methoden zu nisten versuchen, auf dieser Seite gefunden:

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

Meine app Lasten, aber es ist die Anzeige etwas nicht in der Kopfzeile. Es sollte einen Titel und ein Bild haben, das beim Anklicken das Menü der Schublade anzeigt.

Wenn jemand so etwas zur Arbeit bekommen hat, können Sie bitte helfen? Vielen Dank!

Hier ist meine 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

Es sagt here dass berührbare Highlight nur ein Kind haben sollte. Aber Sie haben onPress als Attribut in ihm bestanden. Das könnte das Problem sein.

Die reagierenden nativen Dokumente erwähnen diese Syntax für TouchableHighlight. Wenn Sie mehr als ein untergeordnetes Element verwenden möchten, dann wickeln Sie es in eine Ansicht ein.

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