Browse Source

update docs

Daniel Zlotin 6 years ago
parent
commit
c09431f7e6
2 changed files with 14 additions and 4 deletions
  1. 7
    2
      docs/docs/Usage.md
  2. 7
    2
      docs/docs/topBar-buttons.md

+ 7
- 2
docs/docs/Usage.md View File

39
 
39
 
40
 ## Screen Lifecycle
40
 ## Screen Lifecycle
41
 
41
 
42
-The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears. 
42
+The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears (after it was bounded using `Navigation.events().bindComponent(this)`). 
43
 
43
 
44
 Similar to React's `componentDidMount` and `componentWillUnmount`, what's different is that they represent whether the user can actually see the component in question -- and not just whether it's been mounted or not. Because of the way React Native Navigation optimizes performance, a component is actually `mounted` as soon as it's part of a layout -- but it is not always `visible` (for example, when another screen is `pushed` on top of it).
44
 Similar to React's `componentDidMount` and `componentWillUnmount`, what's different is that they represent whether the user can actually see the component in question -- and not just whether it's been mounted or not. Because of the way React Native Navigation optimizes performance, a component is actually `mounted` as soon as it's part of a layout -- but it is not always `visible` (for example, when another screen is `pushed` on top of it).
45
 
45
 
47
 
47
 
48
 > They are implemented by iOS's viewDidAppear/viewDidDisappear and Android's ViewTreeObserver visibility detection
48
 > They are implemented by iOS's viewDidAppear/viewDidDisappear and Android's ViewTreeObserver visibility detection
49
 
49
 
50
-To use them, simply implement them in your component like any other React lifecycle function:
50
+To use them, simply implement them in your component like any other React lifecycle function, and bind the screen to the Navigation events module which will call all functions automatically:
51
 
51
 
52
 ```js
52
 ```js
53
 class LifecycleScreenExample extends Component {
53
 class LifecycleScreenExample extends Component {
54
   constructor(props) {
54
   constructor(props) {
55
     super(props);
55
     super(props);
56
+    Navigation.events().bindComponent(this);
56
     this.state = {
57
     this.state = {
57
       text: 'nothing yet'
58
       text: 'nothing yet'
58
     };
59
     };
66
     alert('componentDidDisappear');
67
     alert('componentDidDisappear');
67
   }
68
   }
68
 
69
 
70
+  navigationButtonPressed({buttonId}) {
71
+    // a navigation-based button (for example in the topBar) was clicked. See section on buttons.
72
+  }
73
+
69
   componentWillUnmount() {
74
   componentWillUnmount() {
70
     alert('componentWillUnmount');
75
     alert('componentWillUnmount');
71
   }
76
   }

+ 7
- 2
docs/docs/topBar-buttons.md View File

63
 
63
 
64
 # Handling button press events
64
 # Handling button press events
65
 
65
 
66
+Navigation sends events on button clicks, to which you can subscribe from anywhere using `Navigation.events().registerNavigationButtonPressedListener((event) => {})`.
67
+Additionally the component can listen to the button clicks just for its own buttons (via componentId) by using `events().bindComponent(this)`.
68
+This has to be called if you want the component to handle navigation events, such as navigationButtonPressed.
69
+Example:
70
+
66
 ```js
71
 ```js
67
 class MyScreen extends Component {
72
 class MyScreen extends Component {
68
   static get options() {
73
   static get options() {
78
 
83
 
79
   constructor(props) {
84
   constructor(props) {
80
     super(props);
85
     super(props);
81
-    Navigation.events().bindComponent(this); // bindComponent(this) has to be called if you want the component to handle navigation events, such as navigationButtonPressed
86
+    Navigation.events().bindComponent(this); // <== Will be automatically unregistered when unmounted
82
   }
87
   }
83
 
88
 
84
   navigationButtonPressed({ buttonId }) {
89
   navigationButtonPressed({ buttonId }) {
85
-
90
+    // will be called when "buttonOne" is clicked
86
   }
91
   }
87
 }
92
 }
88
 ```
93
 ```