将props.navigator传递给react天然中的父

Question

im使用React-Native-side-menu在不同场景之间导航的问题。渲染了吗？

主代码：

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不确定。

那么我应该如何解决这个问题？我的代码有什么问题？我是一个新的React本地学习者，仍然对如何以正确的方式包装不同的组件感到困惑。

有一个更好的视图，这是源文件

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 Prop指定给该功能呈现的孩子。