在标头中响应本机导航类函数

Question

我在反应本机导航和嵌套导航器方面遇到了问题。

基本上，嵌套导航器(页面中的选项卡(工作得很好。但是当我使用 _saveDetails 函数在标题中添加一个按钮时，如果我在"玩家"选项卡中，它会给我一个未定义的函数，当我在"团队"选项卡上时，它会很好地工作

有没有人知道我做错了什么？谢谢。

class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerRight: <Button title="Save" onPress={() => 
params.handleSave()} />
};
};
_saveDetails() {
console.log('clicked save');
}
componentDidMount() {
this.props.navigation.setParams({ handleSave: this._saveDetails });
}
render() {
return (
<View />
);
}
}
const MainScreenNavigator = TabNavigator({
Players: { screen: HomeScreen},
Teams: { screen: HomeScreen},
});
const SimpleApp = StackNavigator({
Home: { screen: MainScreenNavigator },
Player: { screen: PlayerPage },
});

Answer 1

请尝试这个，如果您遇到任何其他问题，请告诉我。只需根据以下代码转换您的代码即可。

静态导航选项 = { 标头：(导航，标头(=> ({ ...页眉 右：( navigation.navigate('Settings'(}>Settings ) }) } 谢谢

Answer 2

只需将代码更改为这样

class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
// const { params = {} } = navigation.state; //delete this
return {
headerRight: <Button title="Save" onPress={() => 
navigation.state.params.handleSave()} />  // add navigation.state
};
};
.....