在 react native 中将 props.navigator 传递给父级

Question

我在使用 react-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 未定义。

那么我应该如何解决这个问题？我的代码有什么问题？我是 React Native 的新手，对于如何以正确的方式包装不同的组件仍然有些困惑。

为了看得更清楚，这里是source file

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 属性指定给由该函数呈现的子项即可。