Добавить кнопку гамбургера в React Native Navigation

Я новичок в 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>


react-native navigation hamburger-menu
person NoxiousFox1102    schedule 16.05.2017    source источник
comment
проверьте эту ссылку github.com/react-community/react-navigation/issues/1539   -  person Hoa Nguyen    schedule 22.09.2017
comment
есть ответ на этот вопрос?   -  person Braian Mellor    schedule 18.10.2017

Ответы (3)


arrow_upward
17
arrow_downward

Имея это, вы очень близки к решению.

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

Малоизвестный факт - это navigationOptions функция accept, которая возвращает параметры навигации. Эта функция принимает некоторые свойства, navigation один из них. Знайте это, немного скорректируйте свой код.

static navigationOptions = function(props) {
  return {
    title: 'Welcome',
    headerLeft: <Button onPress={() => props.navigation.navigate('DrawerOpen')} title= "=" />
  }
};
person Andreyco    schedule 16.05.2017
comment
Это хорошее решение, но если вы хотите избавиться от фона кнопки, используйте ICON headerLeft: ‹Icon onPress = {() =› props.navigation.navigate ('DrawerOpen')} name = menu style = {{marginLeft: 10}} / ›, - person Sanny Nagveker; 27.10.2017

arrow_upward
2
arrow_downward

проверьте эту ссылку с той же проблемой 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
    }
  }
  }
})
person Hoa Nguyen    schedule 22.09.2017

arrow_upward
0
arrow_downward

В приведенном выше коде кажется, что вы добавляете параметры на боковую панель и переходите к меню боковой панели.

//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" />
        );
      }
    }

Таким образом, вы можете создать столько вариантов ящиков, сколько сможете .. Теперь, как комбинировать варианты ящиков:

// реагирующая навигация предоставляет вам 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 */}
/>

Ниже приведены реквизиты, которые навигатор предоставляет для открытия / закрытия ящика.

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

Вы также можете настроить стиль ящика по своему усмотрению, например:

drawerWidth - Ширина выдвижного ящика. drawerPosition - Возможны варианты слева или справа. По умолчанию - левая позиция. contentComponent - по умолчанию в ящике нет прокрутки. Чтобы добавить прокрутку в ящик, вам нужно добавить contentComponent в конфигурацию. contentOptions - как следует из названия, они используются для окраски активных и неактивных элементов ящика (метки).

Ваше здоровье :)

person Codesingh    schedule 16.05.2017