react实现汉堡_将汉堡包按钮添加到React Native Navigation

I'm very new to React-Native so I definitely may be missing something. But all I want to do is add a hamburger type button to a settings page in the main Navigation bar. I have set up a link in the main part of that works the way I want hamburger button to work.

Screenshot

import React from 'react';

import { AppRegistry, Text, View, Button } from 'react-native';

import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {

static navigationOptions = {

title: 'Welcome',

headerLeft:

};

render() {

const { navigate } = this.props.navigation;

return (

onPress={() => navigate('Settings')}

title="Link to Settings" />

);

}

}

class Settings extends React.Component {

static navigationOptions = {

title: 'Settings',

headerLeft:

};

render() {

return Hello, Settings!;

}

}

const SimpleApp = StackNavigator({

Home: { screen: HomeScreen },

Settings: { screen: Settings}

});

AppRegistry.registerComponent('NavPractice', () => SimpleApp);

解决方案

Having this, you're very close to solution.

static navigationOptions = {

title: 'Welcome',

headerLeft:

};

Little know fact is navigationOptions accept function which return navigation options. That function accept some props, navigation one of them. Know this, adjust your code a little.

static navigationOptions = function(props) {

return {

title: 'Welcome',

headerLeft: props.navigation.navigate('DrawerOpen')} title= "=" />

}

};