当屏幕位于堆栈title内（其中堆栈{{1}）内时，我想不出一种方法来给标题提供headerRight和A按钮}位于选项卡A中，该选项卡本身位于根堆栈T中。标头显示时，左侧有一个后退按钮，但无法实现更多配置。
我经历过this doc piece on navigation options resolution，这在许多github问题中都有建议。我只是无法弄清楚！
我的导航设计如下：
R
AppContainer.js // Bottom nav tab
const TabsRoot = createMaterialBottomTabNavigator(
{
SavedTab: { screen: SavedTab },
// ... other tabs
},
{
// ... order of tabs and style info
}
);
const AppRoot = createStackNavigator({
Tabs: {
screen: TabsRoot,
navigationOptions: ({ navigation }) => ({
header: null
})
},
// other screens (not including any screen stacked inside any tab)
}
});
export default createAppContainer(AppRoot)
SavedTab.js const SavedTab = createStackNavigator(
{
SavedWishlists: {
screen: SavedListsScreenConnector,
navigationOptions: ({ navigation }) => ({
header: null
})
},
SavedWishlistItems: {
screen: SavedListItemsConnector
/**
* I WANT HEADER CONFIGURABLE IN THIS SCREEN
* HERE I COULD HARDCODE TITLE, BUT I WANT IT TO BE SET VIA `navigation.setParams`
*/
}
},
{
initialRouteName: "SavedWishlists"
}
);
SavedTab.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
tabBarLabel: <Text style={{ fontWeight: "bold" }}>Saved</Text>,
tabBarIcon: ({ focused, tintColor }) => (
<Icon name="ios-heart-empty" color={tintColor} size={24} />
)
};
};
SavedListItemsConnector.js总结我的确切观察结果/问题：
在包含class SavedListItemsScreenConnector extends React.Component {
constructor(props) {
super(props);
this.thisWishlistId = this.props.navigation.getParam("id");
}
componentDidMount = () => {
this.props.navigation.setParams({
deleteWishlist: this.deleteWishlist
});
};
/**
* THIS IS NEVER CALLED/EXECUTED
*/
static navigationOptions = ({ navigation }) => {
console.log("list items navigationOptions");
const deleteWishlist = navigation.getParam("deleteWishlist");
return {
// title: navigation.getParam("name", "My Wishlist"),
headerRight: (
<IconButton
icon="delete"
size={28}
color={colors.grey1}
onPress={() => deleteWishlist()}
/>
)
};
};
render() {
return null
}
}
的{{1}}的{{1}}中，我可以对标题进行硬编码，但是我希望通过createStackNavigator中的SavedTab.js来设置标题（这样我还可以在标题右侧设置删除按钮并控制其SavedWishlistItems事件）。
navigation.setParams中永远不会调用navigationOptions 静态方法。
包裹信息：
SavedListItemsConnector.js