React native: как открыть модальный или лист действий при нажатии на вкладку кнопки в wix реагирует на встроенную навигацию - PullRequest
Новая
       29

React native: как открыть модальный или лист действий при нажатии на вкладку кнопки в wix реагирует на встроенную навигацию

0 голосов
/ 09 июня 2019

Как открыть модальный файл / лист действий, щелкнув нижнюю вкладку приложения на основе вкладок, используя wix реагирует на встроенную навигацию v2 ?

В настоящее время я использую следующий пакет иверсия:

  • реакция-нативная: «0.59.8»
  • реакция: «16,8.3»
  • реакция-нативная-навигация: «^ 2.13.2"
  • response-native-image-crop-picker:" ^ 0.24.1 "

Вот мой маршрутный / навигационный файл 

 Promise.all([
        Foundation.getImageSource("home", 40),
        FontAwesome5.getImageSource("user",30),
        Feather.getImageSource("camera",25),
    ]).then(sources => {
        Navigation.setRoot({
            root: {
                sideMenu: {
                    center: {
                        bottomTabs: {
                            options: {
                                bottomTabs: {
                                    backgroundColor: 'white',
                                    titleDisplayMode: 'alwaysHide'
                                },
                            },
                            children: [
                                {
                                    stack: {
                                        children: [{
                                            component: {
                                                name: 'HomeScreen',
                                                passProps: {
                                                    text: 'This is tab 1'
                                                }
                                            }
                                        }],
                                        options: {
                                            bottomTab: {
                                                testID: 'HOME_TAB',
                                                icon: sources[0],
                                            },

                                            topBar: {
                                                title: {
                                                    text: 'MyReactApp',
                                                }
                                            }
                                        }
                                    }
                                },
                                {
                                    component: {
                                        name: 'Camera',
                                        passProps: {
                                            text: 'This is tab 2'
                                        },
                                        options: {
                                            bottomTab: {
                                                testID: 'CAMERA_TAB',
                                                icon: sources[2]
                                            }
                                        }
                                    }
                                },
                                {
                                    stack: {
                                        children: [{
                                            component: {
                                                name: 'ProfileScreen',
                                                passProps: {
                                                    text: 'Profile Screen'
                                                }
                                            }
                                        }],
                                        options: {
                                            bottomTab: {
                                                testID: 'PROFILE_TAB',
                                                icon: sources[1],
                                            },
                                            topBar: {
                                                title: {
                                                    text: 'John Doe',
                                                }
                                            }
                                        }
                                    }
                                }
                                ]
                        },
                    },
                },
            }
        });
    });

Все яхочу, чтобы, когда пользователь нажимал на вкладку camera, он открывал модальную таблицу / таблицу действий, в которой показывались опции, выбрать ли ему изображение из списка или открыть камеру.Для этого я хочу использовать react-native-image-crop-picker.Но как мне этого добиться или как настроить действия нажатия на вкладку кнопки?

Я смотрел в Google, но не нашел ничего, кроме этих ссылок, которые мне не сильно помогли

https://github.com/wix/react-native-navigation/issues/3238

https://github.com/wix/react-native-navigation/issues/2766

https://github.com/wix/react-native-navigation/issues/3204

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Говорят, что документация v2 хуже, чем версия v1. Я использую этот пакет. В основном я пытаюсь решить проблемы, которые не могу решить, глядя на исходный код. Я должен сказать, что это полезно. Это немного сложно, но это действительно помогает.

Стоит вспомнить еще раз; В структуре React все является компонентом .

Есть много способов; (что приходит на ум прямо сейчас)

  1. Вы создаете свой собственный компонент и подключаете его к нижней вкладке. Когда этот компонент запущен, вы можете отобразить либо модал wix, либо модал реагировать-нативный.
  2. Хотя вышеизложенное все еще действует; Вы можете просто сделать это с passProps . Но помните, что когда вы это сделаете, также появится страница, на которую вы ссылаетесь на bottomTab.

В качестве решения;

Вам не нужно использовать модал Wix. Честно говоря, мне это не понравилось, потому что я ожидал модального стиля Bootstrap, я использую собственный модальный реагирующий натив. Это ваше решение.

Вы можете использовать любое из написанных мной решений bottomTab или создать решение самостоятельно. Wix предоставил для этого достаточно возможностей.

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

Я видел примеры кодов в репозитории модуля.

Я могу создать образец репо, если не могу это объяснить: /

0 голосов
/ 09 июня 2019

Один из способов сделать это - использовать событие componentDidAppear.Это событие вызывается каждый раз, когда компонент присоединяется к иерархии представлений (таким образом, появляется).Он более или менее используется таким же образом, как и API-интерфейс жизненного цикла React Native (например, componentDidMount), с той разницей, что вам необходимо «прослушивать» его в соответствии с документами componentDidMount () (https://wix.github.io/react-native-navigation/#/docs/events?id=componentdidappear)

Затем вы можете использовать некоторую логику в componentDidAppear () вашего компонента Camera, чтобы показать модальное или оверлейное изображение и передать функцию в качестве опоры для изменения состояния компонента Camera и рендеринга в соответствии с выбором. В следующем примере используетсяПример componentDidAppear () из документов RNN. Отказ от ответственности, я не проверял его, но он должен работать. 

class Camera extends Component {
  constructor(props){
      super(props);

      // Don't forget to bind the setMode function
      this.setMode = this.setMode.bind(this);

      // Edit: catch the tabchange
      this.eventSubscription = Navigation.events().registerBottomTabSelectedListener(this.tabChanged);

      this.state = {
         mode: 'default'
      }
  }

  componentDidMount() {
    this.navigationEventListener = Navigation.events().bindComponent(this);
  }

  componentWillUnmount() {
    // Not mandatory
    if (this.navigationEventListener) {
      this.navigationEventListener.remove();
    }
  }

  componentDidAppear() {
      Navigation.showModal({
          component: {
              // Example name, don't forget to register the modal screen
              name: 'modals.ImageModeChoiceModal',
              passProps: {
                  setMode: this.setMode,
                  // Edit pass the index of the unselected tab to the modal
                  fromTab: this.fromTab
              }
           }
      });
  }

  setMode(mode){
      this.setState({
          mode: mode
      });
  }

  // Edit: callback that will be fired on the bottomTabSelectedListener
  // Tracks the selected and unselected tab index
  tabChanged = (selectedTabIndex, unselectedTabIndex}) => {
      this.fromTab = unselectedTabIndex;
  }

  render(){
      if(this.state.mode === "camera"){
          return( 
                // Camera component
          );
      } else if(this.state.mode === "roll"){
          return( 
                // Camera roll component
          );
      } else {
          return(
                // Default component
                // You could also choose to implement the user choice logic 
                // here
          )
      }
  }
}

РЕДАКТИРОВАТЬ: в качестве дополнительного вопроса, возникшая проблемаобработка обратной навигации. При нажатии или при модальном закрытии модальное окно закрывается и заканчивается переходом к компоненту «Камера» (в данном случае к экрану / вкладке). Это происходит потому, что вкладка выбрана, и модальное окно открывается при «появлении»Компонент камеры. Навигационные реквизиты не содержат информацию о нажатых вкладках. Поэтому вам нужно получить информациюпро это где-то еще.Вы можете добавить прослушиватель событий навигации в компоненте «Камера» для перехвата выбранных и невыбранных индексов вкладок (пример: https://github.com/wix/react-native-navigation/issues/4109, документы: https://wix.github.io/react-native-navigation/#/docs/events?id=registerbottomtabselectedlistener)

В модальном компоненте необходимо добавить некоторую логику для обработкиповедение backpress / back (источник: https://facebook.github.io/react-native/docs/backhandler.html):

  ...

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    this.backHandler.remove()
  }

  handleBackPress = () => {
    this.closeModal();
    return true;
  }

  // Can also be used to implement close button behaviour (eg. on iOS)
  closeModal(){

      // Dismiss the modal itself
      Navigation.dismissModal(this.props.componentId);

      // This changes the active tab programmatically
      // Don't forget to add a bottomTabsId to your bottomTabs configuration
      Navigation.mergeOptions('bottomTabsId', {
          bottomTabs: {

              // Using the index of the unselected tab passed from the Camera component
              currentTabIndex: this.props.fromTab
          }
      });
  }

  ...

ps: в соответствии с документами RNN dismissModal принимает в качестве второго параметра 'mergeOptions', но я еще не использовал и не проверял это, но это, вероятно, означаетчто Navigation.mergeOptions можно интегрировать в вызов Navigation.dismissModal. (документы: https://wix.github.io/react-native-navigation/#/docs/screen-api?id=dismissmodalcomponentid-mergeoptions)

...