react-native - 在标题中反应本机导航类功能

Question

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

基本上，嵌套导航器（页面中的选项卡）工作得很好。但是，当我使用 _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 },
});

Answer 1

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

static navigationOptions = { header: (navigation, header) => ({ ...header, right: ( 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
    };
  };

.....