将汉堡按钮添加到 React Native Navigation

Posted 2023-04-13

【中文标题】将汉堡按钮添加到 React Native Navigation

【英文标题】：Add hamburger button to React Native Navigation

【发布时间】：2017-10-15 21:40:06

【问题描述】：

我对 React-Native 很陌生，所以我肯定会遗漏一些东西。但我要做的就是在主导航栏中的设置页面中添加一个汉堡型按钮。我已经在主要部分设置了一个链接，该链接按照我希望汉堡按钮的工作方式工作。 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>

【问题讨论】：

查看此链接github.com/react-community/react-navigation/issues/1539

这个问题有什么答案吗？

【参考方案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= "=" />
  
;

【讨论】：

这个解决方案很好，但如果你想摆脱按钮背景使用 ICON headerLeft: props.navigation.navigate('DrawerOpen') name="menu " 样式=marginLeft: 10 />,

【参考方案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')  />

---

来自

   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
    
  
  
)

【参考方案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=/* 这个道具将作为 props.screenProps */ 传递给屏幕组件和导航选项，如下所示：

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

以下是 react navigator 提供的用于打开/关闭抽屉的道具。

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

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

drawerWidth - 抽屉的宽度 drawPosition - 选项是左或右。默认为左侧位置。 contentComponent - 默认情况下，抽屉中没有可用的滚动视图。为了在抽屉中添加滚动视图，您需要在配置中添加contentComponent。 contentOptions - 顾名思义，这些用于为活动和非活动抽屉项目（标签）提供颜色。

干杯:)