Как передать ссылку на Navigator в renderScene?

Question

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

render: function() { 
    return (
     <Navigator 
      initialRoute={ { name: 'NewsList', index: 0 } } 
      renderScene={ (route, navigator) => NewsList } 
     />              
    );               
}, 

Аналогично, в функции рендеринга сцены мне нужно передать навигатор функции рендеринга строк.

Что такое идиоматический способ передачи таких ссылок?

Answer 1

Если я правильно понял ваш вопрос, вы говорите, что для отображения события навигации вам нужны ссылки на навигатор. Это (ИМО) является неправильным подходом.

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

Я могу привести пример кода, если это не ясно :)

Answer 2

Как Колин говорил, что вам нужно передать функцию обратного вызова в список ваших вещей. Ниже приведен код из примерного проекта (UIExplorer) в самой реакции native.

Здесь мы передаем объект navigator в NavMenu, который является компонентом списка.

var TabBarExample = React.createClass({ 
    // Other methods... blah blah 
    renderScene: function(route, nav) { 
     switch (route.id) { 
      case 'navbar': 
      return <NavigationBarSample navigator={nav} />; 
      case 'breadcrumbs': 
      return <BreadcrumbNavSample navigator={nav} />; 
      case 'jumping': 
      return <JumpingNavSample navigator={nav} />; 
      default: 
      return (
       <NavMenu 
       message={route.message} 
       navigator={nav} 
       onExampleExit={this.props.onExampleExit} 
       /> 
      ); 
     } 
    }, 

    render: function() { 
     return (
      <Navigator 
      style={styles.container} 
      initialRoute={{ message: "First Scene", }} 
      renderScene={this.renderScene} 
      configureScene={(route) => { 
       if (route.sceneConfig) { 
       return route.sceneConfig; 
       } 
       return Navigator.SceneConfigs.FloatFromBottom; 
      }} 
      /> 
     ); 
     } 
}); 

В компоненте NavMenu, мы проходим обратный вызов на onPress каждого NavButton.

class NavMenu extends React.Component { 
    render() { 
    return (
     <ScrollView style={styles.scene}> 
     <Text style={styles.messageText}>{this.props.message}</Text> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe right to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromRight, 
      }); 
      }} 
      text="Float in from right" 
     /> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe down to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromBottom, 
      }); 
      }} 
      text="Float in from bottom" 
     /> 
     // Omitted rest of the NavButtons. 
     </ScrollView> 
    ); 
} 

На примере приведен пример link.

Answer 3

Вопрос был сформулирован как-то неопределенно. Я решил проблему, добавив навигатор в UIExplorerPage, например <UIExplorerPage navigator={navigator} />. Доступ к свойствам можно получить в UIExplorerPage с использованием this.props.