Posted at

React NavigationでNavigationOptionsに関数を埋め込む

More than 1 year has passed since last update.

React NavigationのnavigationOptionsにクラスメソッドを渡すには少し工夫必要だった。


やりたいこと

やりたいことは以下のようなこと。ただし、navigationOptionsはstaticメソッドなのにthis.handleSaveを渡そうとしても動かない。

  static navigationOptions = ({

headerLeft: <SaveButton onPress={this.handleSave}/>,
})


navigationsetParamsして渡す

setParamscomponentDidMountのときに定義し、実行時に渡せればよい。

https://reactnavigation.org/docs/navigators/navigation-prop#setParams-Make-changes-to-route-params

  static navigationOptions = ({

headerRight: <SaveButton onPress={() => navigation.state.params.handleSave()}/>,
})

componentDidMount() {
this.props.navigation.setParams({
handleSave: this.handleSave(),
})
}

handleSave = () => {
// 保存処理
}