我的子卡如何在NavigationExperimental中实现自己的导航标题按钮?

时间:2016-07-13 14:37:12

标签: react-native navigator

NavigationHeader及其左右按钮在堆栈的根导航卡中定义。如果我希望堆栈中的孩子实现他们自己的左右按钮动作怎么办?实现这个的最佳方法是什么?当然,我不想在根导航器中使用巨大的if / else块,并且根导航器也不需要知道它的子实现。

  render () {
    return (
      <NavigationCardStack
        direction='horizontal'
        navigationState={this.props.navigation}
        onNavigate={this._handleNavigate.bind(this)}
        renderOverlay={this._renderHeader.bind(this)}
        renderScene={this._renderScene} />
      )
  }

  _renderHeader(props) {
    const showHeader = props.scene.route.title &&
      (Platform.OS === 'ios' || props.scene.route.key === 'details');

    if (showHeader) {
      return (
        <NavigationHeader
        {...props}
        renderTitleComponent={this._renderTitleComponent.bind(this)}
        renderLeftComponent={this._renderLeftComponent.bind(this)}
        renderRightComponent={this._renderRightComponent.bind(this)}
        />
      );
    }

    return null;
  }

  _renderTitleComponent(props) {
    return (
      <NavigationHeader.Title>
        {props.scene.route.title}
      </NavigationHeader.Title>
    );
  }

  _renderLeftComponent(props) {
    const { dispatch, navigation } = this.props;

    if (props.scene.route.key === 'chat_overview') {
      return (
        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={this.props._handleMenu}>
          <Text>Menu</Text>
        </TouchableHighlight>
      );
    }
    else if (props.scene.route.showBackButton) {
      return (
        <NavigationHeaderBackButton onNavigate={() => dispatch(popRoute(navigation.key))} />
      );
    }

    return null;
  }

0 个答案:

没有答案