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属性，另一方面，如果我单击Menu上的主页按钮，它会给我一个错误，说props.navigator未定义。

那我应该怎么解决这个问题呢？我的代码有什么问题？我是一个反应原生的新学习者，仍然有点混淆我应该如何以正确的方式包装不同的组件。

为了获得更好的视图，这里是{{3}}

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道具通过那个功能。

将props.navigator传递给父母反应原生

1 个答案: