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;
}