Передать props.navigator родителю в реагировать родной

Question

У меня возникла проблема с использованием response-native-side-menu для навигации между различными сценами. В основном потому, что мой NavigatorIOS находится внутри SideMenu, поэтому я считаю, что props.navigator не существует до тех пор, пока не будет визуализирован NavigatorIOS?

основной код:

class HomeScene extends Component{
  static title = 'Home';

  constructor(props){
    super(props);
    this.state={
      title:'Home'
    };
  }

  render(){
    return (
      <View style={styles.defaultContainer}>
          <Text style={styles.defaultText}>
              You are on the Home Page
          </Text>
          <View style={styles.group}>
            {this._renderRow("To another page", () => {
              this.props.navigator.push({
                title: Page.title,
                component: Page,
                passProps: {depth: this.props.depth ? this.props.depth + 1 : 1},
                onLeftButtonPress: () => this.props.navigator.pop(),
              });
            })}
          </View>
      </View>
    );
  }

  _renderRow = (title: string, onPress: Function) => {
    return (
      <View>
        <TouchableHighlight onPress={onPress}>
          <View style={styles.row}>
            <Text style={styles.rowText}>
              {title}
            </Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  };
}

class Menu extends Component{
  constructor(props){
    super(props);
  }

  static propTypes={
    onItemSelected: React.PropTypes.func.isRequired,
  };

  _renderRow = (title: string, onPress: Function) => {
    return (
      <View>
        <TouchableHighlight onPress={onPress}>
          <View style={styles.row}>
            <Text style={styles.rowText}>
              {title}
            </Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  };

  render(){
    return(
      <ScrollView scrollsToTop={false} style={styles.sideMenuBar}>
        {this._renderRow("Home", function(){
          this.props.navigator.replace({
            title: 'Home',
            component: HomeScene,
            passProps: {depth: this.props.depth ? this.props.depth + 1 : 1},
            onLeftButtonPress: () => this.props.navigator.pop(),
          });
        })}

        {this._renderRow("Page", function(){
          this.props.navigator.replace({
            title: 'Page',
            component: Page,
            passProps: {depth: this.props.depth ? this.props.depth + 1 : 1},
            onLeftButtonPress: () => this.props.navigator.pop(),
          });
        })}
         </ScrollView>
        )
      }
}


class App extends Component {
  render() {
      const menu = <Menu onItemSelected={this.onMenuItemSelected} navigator={this.props.navigator}/>; <--- will be undefined
      return (
              <SideMenu
                menu={menu}
                isOpen={this.state.isMenuSideBarOpen}
                onChange={(isOpen)=>{this.updateMenuState(isOpen)}}
              >
               <StatusBar
                backgroundColor="blue"
                barStyle="light-content"
               />
               <NavigatorIOS
                initialRoute={{
                  component: HomeScene,
                  title: this.state.selectedItem,
                  leftButtonIcon: this.state.menuIcon,
                  onLeftButtonPress: ()=>{
                    this.toggle();
                  }
                }}
                style={{flex: 1}}
                tintColor="#FFFFFF"
                titleTextColor="#FFFFFF"
                barTintColor='#000099'
              >
              </NavigatorIOS>
             </SideMenu>
        );
     }
  }
}

Как вы видите, я использовал один и тот же код для обработки навигации в меню и домашней сцене, но на домашней странице, отображаемой NavigatorIOS, будет свойство props.navigator, с другой стороны, если я нажму кнопку "Домой" в меню, это даст мне ошибка говорит, что props.navigator не определен.

Так как мне это исправить? А в чем проблема с моим кодом? Я новичок в изучении нативных реакций, все еще немного сбиваюсь с толку о том, как правильно обернуть различные компоненты.

Для лучшего обзора, вот исходный файл

Answer 1

Вероятно, самый простой способ будет добавить this.props.navigator к маршруту. Так вроде:

{this._renderRow("To another page", () => {
              this.props.navigator.push({
                navigator: this.props.navigator
                title: Page.title,
                component: Page,
                passProps: {
                    depth: this.props.depth ? this.props.depth + 1 : 
                        1},
                    onLeftButtonPress: () => 
                        this.props.route.navigator.pop()
              });
            })}

После этого вы сможете получить доступ к навигатору по маршруту, используя this.props.route.navigator, Я предполагаю App как ваш корневой компонент и отображается перед остальным.

Я не так знаком с NavigatorIOS но если есть способ переопределить renderScene функция, это было бы лучше - просто укажите navigator опора для ребенка, оказываемого этой функцией.