react-navigationのバージョンアップ

react-navigationのバージョンをあげてもう一度ドキュメントをよみなおしてみる

Headerのボタンの挙動

https://reactnavigation.org/docs/header-buttons.html

navigationOptionがstaticメソッドのため、navigation.state.paramsを使ってやりとりを行う

static navigationOptions = ({ navigation }) => { const params = navigation.state.params || {}; return { headerTitle: <LogoTitle />, headerRight: ( <Button onPress={params.increaseCount} title="+1" color="#fff" /> ), }; }; componentWillMount() { this.props.navigation.setParams({ increaseCount: this._increaseCount }); } state = { count: 0, }; _increaseCount = () => { this.setState({ count: this.state.count + 1 }); };

didFocusイベントが取れる？

https://reactnavigation.org/docs/status-bar.html

子のコンポーネントにnavigationを渡す方法

https://reactnavigation.org/docs/connecting-navigation-prop.html

いちいちnavigationを渡さなくて良いので便利

import React from 'react'; import { Button } 'react-native'; import { withNavigation } from 'react-navigation'; class MyBackButton extends React.Component { render() { return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />; } } // withNavigation returns a component that wraps MyBackButton and passes in the // navigation prop export default withNavigation(MyBackButton);

DeepLink

前回のバージョンではTabNavigationを使うと動かなかったけど、今回は動くようになったのかな？あとで試す

https://reactnavigation.org/docs/deep-linking.html