Daniel Zlotin 6 lat temu
rodzic
commit
c09431f7e6
2 zmienionych plików z 14 dodań i 4 usunięć
  1. 7
    2
      docs/docs/Usage.md
  2. 7
    2
      docs/docs/topBar-buttons.md

+ 7
- 2
docs/docs/Usage.md Wyświetl plik

@@ -39,7 +39,7 @@ Navigation.events().registerAppLaunchedListener(() => {
39 39
 
40 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 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,12 +47,13 @@ There are lots of use cases for these. For example: starting and stopping an ani
47 47
 
48 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 52
 ```js
53 53
 class LifecycleScreenExample extends Component {
54 54
   constructor(props) {
55 55
     super(props);
56
+    Navigation.events().bindComponent(this);
56 57
     this.state = {
57 58
       text: 'nothing yet'
58 59
     };
@@ -66,6 +67,10 @@ class LifecycleScreenExample extends Component {
66 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 74
   componentWillUnmount() {
70 75
     alert('componentWillUnmount');
71 76
   }

+ 7
- 2
docs/docs/topBar-buttons.md Wyświetl plik

@@ -63,6 +63,11 @@ Navigation.push(this.props.componentId, {
63 63
 
64 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 71
 ```js
67 72
 class MyScreen extends Component {
68 73
   static get options() {
@@ -78,11 +83,11 @@ class MyScreen extends Component {
78 83
 
79 84
   constructor(props) {
80 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 89
   navigationButtonPressed({ buttonId }) {
85
-
90
+    // will be called when "buttonOne" is clicked
86 91
   }
87 92
 }
88 93
 ```