この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 次のリビジョン | 前のリビジョン | ||
|
reactnative:react-navigation [2019/02/13 01:10] ips 作成 |
reactnative:react-navigation [2019/03/08 06:20] (現在) ips |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| - | ====== navigation ====== | + | ====== react-navigation====== |
| + | |||
| + | ====== インストール ====== | ||
| + | <code> | ||
| + | npm install --save react-navigation | ||
| + | </code> | ||
| ===== イベント ===== | ===== イベント ===== | ||
| ライン 11: | ライン 16: | ||
| this.props.navigation.addListener('didBlur', () => console.log('didBlur')) | this.props.navigation.addListener('didBlur', () => console.log('didBlur')) | ||
| } | } | ||
| + | </code> | ||
| + | |||
| + | ↓も同じ [[https://reactnavigation.org/docs/en/navigation-events.html|NavigationEvents reference]] | ||
| + | イベントを発生させたいコンポーネントのViewの下に追加すればいい。(importが必要) | ||
| + | <code> | ||
| + | import { NavigationEvents } from 'react-navigation' | ||
| + | |||
| + | return ( | ||
| + | <View style={styles.view}> | ||
| + | <NavigationEvents | ||
| + | onWillFocus={() => console.log('will focus')} | ||
| + | onDidFocus={() => console.log('did focus')} | ||
| + | onWillBlur={() => console.log('will blur')} | ||
| + | onDidBlur={() => console.log('did blur')} | ||
| + | /> | ||
| </code> | </code> | ||