在标题中反应本机导航类功能答案

【问题标题】：React native navigation class function in header在标题中反应本机导航类功能
【发布时间】：2017-07-09 18:07:45
【问题描述】：

我遇到了反应原生导航和嵌套导航器的问题。

基本上，嵌套导航器（页面中的标签）工作得很好。但是当我使用 _saveDetails 函数在标题中添加一个按钮时，如果我在 Players 选项卡中，它会抛出一个未定义的函数，并且当我在 Teams 选项卡上时它运行良好

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

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

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

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

静态导航选项 = { 标题：（导航，标题）=>（{ ...标题，对：（ navigation.navigate('设置')}> 设置 ) }) } 谢谢

【讨论】：

【解决方案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
    };
  };

.....

【讨论】：