Действие правой кнопки React Native Navigator

Используя Navigator, мне нужна правая кнопка, которая изменяет состояние представления верхнего уровня. Используя Navigator и пользовательский NavigationBarRouteMapper, я могу добиться всего этого, за исключением действия кнопки.

Используя эту реализацию Navigator:

         <Navigator
            ref='navigator'
            style={styles.appContainer}
            initialRoute={{name: initialRootView.title, component: initialRootView.view}}
            navigationBar={
              <Navigator.NavigationBar
                routeMapper={NavigationBarRouteMapper}
                style={styles.navBar}
              />
            }
            configureScene={() => {
                return Navigator.SceneConfigs.FloatFromRight;
            }}
            renderScene={(route, navigator) => {
                if (route.component) {
                    // add `navigator` and `cache` as props to any top-level component that gets pushed
                    // onto the navigation stack.
                    return React.createElement(route.component, { navigator: navigator, cache: this.state.cache, ...route.props });
                }
            }}
          />

А это NavigationBarRouteMapper:

var NavigationBarRouteMapper = {
  RightButton: function(route, navigator, index, navState) {
    console.log(route.component);
    return (
      <TouchableOpacity
        onPress={route.component.onRightButton}
        style={{width: 100, height: 44, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Right Button</Text>
      </TouchableOpacity>
    );
  },
};

Это правильно отображает правую кнопку, и мой компонент верхнего уровня имеет функцию onRightButton. Но почему его никогда не вызывают?

Выполняя некоторую отладку в контексте RightButton, route.component.prototype.hasOwnProperty('onRightButton') возвращает true, а route.component.hasOwnProperty('onRightButton') возвращает false. Как это возможно? Что странного в возвращенной ссылке route.component?

Любая помощь приветствуется.


react-native javascript navigator
person Jpoliachik    schedule 17.11.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете пройти все, что хотите, как часть маршрута. Например:

initialRoute={{name: initialRootView.title, component: initialRootView.view onRightButton: (() => {console.log('hi')})}}

Затем вы можете получить к нему доступ внутри RightButton:

onPress={route.onRightButton}

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

person Ryguy    schedule 17.11.2015
comment
Это сработало бы, если бы я хотел запустить функцию в контексте навигатора, но мне нужно вызвать функцию в контексте моей визуализируемой сцены. Мне нужно правильное действие кнопки, чтобы изменить состояние в этом представлении. Вместо этого я попробую использовать Events и посмотрю, сработает ли это для меня. colinramsay.co.uk/2015/07/04/react- родной-eventemitters.html - person Jpoliachik; 18.11.2015
comment
@EdoardoMoreni В любом случае я переключил свое приложение на Redux, и отправка действия redux смогла решить эту проблему. Та же концепция, что и при использовании эмиттеров событий. - person Jpoliachik; 01.11.2016