Контекстное всплывающее меню в навигационной панели wix/react-native-navigation

Можно ли установить трехточечное контекстное меню с помощью «реагировать-нативный-всплывающее меню» в навигационной панели «реагировать-нативный-навигация»? или у нас есть какой-либо другой подход для установки трехточечного контекстного меню как в IOS, так и в Android с помощью навигационной панели «react-native-navigation»?


react-native react-native-navigation react-native-popup-menu
person ugendrang    schedule 28.09.2017    source источник
comment
хм... похоже, что для RNN нет прямого решения (которое работает как для ios, так и для android), поскольку оно предназначено для действительно нативной навигации и, следовательно, не поддерживает такой высокий уровень расширяемости с помощью пользовательских компонентов.   -  person sodik    schedule 28.09.2017

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете управлять приоритетом и положением каждой кнопки (на Android), используя свойство showAsAction. Дополнительные сведения см. в документах. .

Короче говоря, следующий фрагмент добавит две кнопки в меню и одну снаружи:

static navigatorButtons = {
  rightButtons: [
    {
      id: 'btn1',
      title: 'Menu button 1'
      showAsAction: 'never'
    },
    {
      id: 'btn2',
      title: 'Menu button 2'
      showAsAction: 'never'
    },
    {
      id: 'btn3',
      title: 'Regular Button'
      icon: require('./img/button.jpeg'),
      showAsAction: 'always'
    }
  ]
);

Это недоступно в iOS, так как в iOS вместо меню обычно используется лист действий.

person guy.gc    schedule 29.09.2017

arrow_upward
0
arrow_downward

Я тоже задавался этим вопросом и нашел решение: как правило, все части меню должны находиться внутри тега Menu, поэтому и MenuTrigger тоже. Вы можете стилизовать MenuTrigger, но я не поместил его в верхнюю панель с этим.

Хорошие новости: это еще проще, просто поместите весь Menu в свой navigationOptions вот так:

static navigationOptions = ({navigation}) => ({
  title: 'Uploaded Videos',
  drawerLockMode: 'locked-closed',
  headerRight: 
    <Menu renderer={SlideInMenu} style={{ zIndex: 10 }}>
      <MenuTrigger text="open menu"/>
      <MenuOptions style={{ flex: 1 }}>
        <Text>Menu</Text>
        <MenuOption onSelect={() => { console.log("clicked") text="Click me" />
      </MenuOptions>
    </Menu>

Предупреждение: navigationOptions являются статическими, поэтому в вашем меню вы не можете использовать функции компонента. Но есть способы обойти это, см., например, эту проблему в react-native- навигация. Как правило, вам, вероятно, следует использовать редукцию для этого.

Надеюсь, это все еще поможет вам!

person konse    schedule 28.02.2018

arrow_upward
0
arrow_downward

На самом деле я создал собственное контекстное меню с помощью этой библиотеки: https://github.com/react-native-community/react-native-modal

Так что в основном это модальное окно с полностью прозрачным фоном. Содержимое модального окна отображается чуть ниже кнопки «контекстное меню из трех точек». Используя их функцию onBackdropPress, вы можете закрыть контекстное меню, если пользователь нажмет за пределами меню.

person Karl Mösenbacher    schedule 11.03.2018