在React Native Navigation中添加汉堡按钮

Question

我对React-Native非常陌生，可能会漏掉一些东西。但我只想在主导航栏的设置页面中添加汉堡式按钮。我已经设置了一个链接，在主要部分可以实现汉堡按钮的功能。 截图

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>

- NoxiousFox1102

---

请查看此链接 https://github.com/react-community/react-navigation/issues/1539 - Hoa Nguyen

这个问题有任何答案吗？ - Braian Mellor

Answer 1

有了这个，你离解决方案非常近了。

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

一个鲜为人知的事实是navigationOptions接受一个返回导航选项的函数。该函数接受一些属性，其中之一是navigation。知道这个，稍微调整一下你的代码。

static navigationOptions = function(props) {
  return {
    title: 'Welcome',
    headerLeft: <Button onPress={() => props.navigation.navigate('DrawerOpen')} title= "=" />
  }
};

- Andreyco

---

这个解决方案很好，但如果你想去掉按钮背景，可以使用图标。 headerLeft: <Icon onPress={() => props.navigation.navigate('DrawerOpen')} name= "menu" style={{marginLeft: 10}} />, - Sanny Nagveker

Answer 2

请查看此链接，其中包含相同的问题：https://github.com/react-community/react-navigation/issues/1539

请检查navigationOptions。

 navigationOptions: ({ navigation }) => ({
              title: 'Schedules',  // Title to appear in status bar
              headerLeft: <Icon name="menu" size={35}
                         onPress={ () => navigation.navigate('DrawerOpen') } />

---

from

   const SchedulesStack = StackNavigator({
  Schedules: {
    screen: SchedulesScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Schedules',  // Title to appear in status bar
      headerLeft: <Icon name="menu" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />
    })
  }
});

const Homestack = StackNavigator({
  Home: {
    Screen: Home
    navigationOptions: ({ navigation }) => ({
      title: 'Home',  // Title to appear in status bar
      headerLeft: <Icon name="menu" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />
    })
  }
});

const Root = DrawerNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      title: 'Home' // Text shown in left menu
    }
  },
  Schedules: {
    screen: SchedulesStack,
    navigationOptions: {
      title: 'Schedules',  // Text shown in left menu
    }
  }
  }
})

- Hoa Nguyen

Answer 3

在上面的代码中，似乎您正在向侧边栏添加选项并导航到侧边栏菜单。

//sidebar menu no.1
    class HomeScreen extends React.Component {
      static navigationOptions = {
        title: 'Welcome',
        headerLeft: <Button onPress={//action taken when option in the menu bar is clicked} title= "//the title of the screen where you will navigate and the sidebar menu lable" />
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
            <Button
              onPress={() => navigate('Settings')}
              title="Link to Settings" />
        );
      }
    }

以此方式，您可以创建尽可能多的抽屉选项...现在如何组合抽屉选项：

//React Navigation 为您提供 DrawerNavigator API

const MyApp = DrawerNavigator({
  Home: {
    screenA: HomeScreen ,
  },
  Settings: {
    screen: MySettingScreens,
  },
});

抽屉还带有一个名为screenProps的属性，如下所示： screenProps={/*此属性将作为props.screenProps传递给屏幕组件和导航选项*/}

<MyApp
  screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}
/>

以下是React导航器提供的打开/关闭抽屉的属性。

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

你也可以根据自己的喜好设置抽屉样式，像这样：

drawerWidth - 抽屉的宽度 drawerPosition - 选项为左或右。默认为左侧位置。 contentComponent - 默认情况下，抽屉中没有可用的滚动视图。为了在抽屉中添加滚动视图，您需要在配置中添加contentComponent。 contentOptions - 如其名称所示，这些用于给活动和非活动抽屉项（标签）着色。

干杯 :)

- Codesingh