将汉堡包按钮添加到React Native Navigation [英] Add hamburger button to React Native Navigation

问题描述

我对React-Native还是很陌生，所以我肯定可能会缺少一些东西.但我要做的只是在主导航栏中的设置页面上添加一个汉堡包类型按钮.我已经在主要部分设置了一个链接，该链接的工作方式与我希望汉堡包按钮的工作方式相同. 截图

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: <Button onPress={ WHAT GOES HERE?? } title= "=" />
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
        <Button
          onPress={() => navigate('Settings')}
          title="Link to Settings" />
    );
  }
}

class Settings extends React.Component {
    static navigationOptions = {
        title: 'Settings',
        headerLeft: <Button title= "=" />
    };
    render() {
        return <Text>Hello, Settings!</Text>;
    }
}

const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Settings: { screen: Settings}
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

推荐答案

有了这个，您就非常接近解决方案.

Having this, you're very close to solution.

static navigationOptions = {
  title: 'Welcome',
  headerLeft: <Button onPress={ WHAT GOES HERE?? } title= "=" />
};

鲜为人知的事实是navigationOptions接受函数，该函数返回导航选项.该功能接受一些道具，navigation其中之一.知道这一点，稍微调整一下代码即可.

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: <Button onPress={() => props.navigation.navigate('DrawerOpen')} title= "=" />
  }
};

这篇关于将汉堡包按钮添加到React Native Navigation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！