Отправка passProps определенным компонентам в React-Native-Navigation

В настоящее время я использую реагирующую нативную навигацию (Wix) и RN 0.48.3 без потока или редукса.

В настоящее время я сосредоточен на том, чтобы серверная часть обрабатывала почти всю логику, поэтому я отправляю «действия», которые выполняются мобильными компонентами. Один из них — открыть внутреннюю ссылку, в которую я могу добавить несколько passProps из бэкенда.

Теперь новый экран может состоять из нескольких компонентов, и я просто отправляю набор свойств на экран.

Мой вопрос: как лучше всего отправить определенные реквизиты определенным компонентам? В настоящее время я думаю об отправке структуры JSON с идентификатором, который я могу сопоставить с ссылкой на последнем экране.

Я открыт для идей. Я не использую redux или flux, и я бы хотел, чтобы это было так, но я готов добавить его в проект, если это упростит ситуацию.


react-native reactjs react-native-navigation
person sfratini    schedule 05.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если у кого-то есть лучшая альтернатива, пожалуйста, дайте мне знать, но я решил это так.

У меня есть ScreenComponent, который на самом деле обогащает и добавляет функции ко всем моим дочерним компонентам, таким как аналитика и некоторые другие помощники.

По сути, я добавляю ссылку на каждый компонент, который добавляю на каждый экран, а затем использую passProps следующим образом:

screenParams: {
                      screen: 'AudioScreen',
                      passProps: {
                          componentProps: {
                              audioCard: {
                                  title:'Audio Title',
                                  subtitle:'Audio Subtitle',
                                  image:{imageSource},
                                  audioSource:{audioSource}                                                        
                              }   
                          }
                      }
                  }

componentProps — это объект, который я использую, и на моем экране я делаю это в своем componentWillMount:

this._children = React.Children.map(this.props.children, child => {
            let extraProps = {
                eventEmitter: this._eventEmitter
            };
            if (child.ref != null && self.props.componentProps && self.props.componentProps[child.ref]){
                extraProps = self.getHelper().concat(extraProps, self.props.componentProps[child.ref])
            }
            return React.cloneElement(child, extraProps);
        });

Как видите, я добавляю eventEmitter к каждому дочернему элементу, поэтому я могу общаться с родительским экраном, чтобы показывать модальные окна, предупреждения об ошибках и т. д. Помощник — это модуль, который у меня есть, который просто объединяет два объекта.

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

До сих пор это работало отлично. Надеюсь, поможет

person sfratini    schedule 09.03.2018