Sfoglia il codice sorgente

Document functional components + hooks

Guy Carmeli 4 anni fa
parent
commit
dbe819205e

+ 8
- 7
playground/src/screens/SideMenuLeftScreen.js Vedi File

@@ -12,15 +12,16 @@ const {
12 12
 
13 13
 function SideMenuLeftScreen(props) {
14 14
   useEffect(() => {
15
-    const componentDisappearListener = Navigation.events().registerComponentDidDisappearListener(
16
-      ({ componentId }) => {
17
-        if (componentId === props.componentId) {
18
-          console.log('RNN', `componentDisappearListener ${componentId}/${JSON.stringify(props)}`);
19
-        }
15
+    const unsubscribe = Navigation.events().bindComponent({
16
+      componentDidAppear: () => {
17
+        console.log('RNN', `componentDidAppear`);
20 18
       },
21
-    );
19
+      componentDidDisappear: () => {
20
+        console.log('RNN', `componentDidDisappear`);
21
+      }
22
+    }, props.componentId);
22 23
     return () => {
23
-      componentDisappearListener.remove();
24
+      unsubscribe.remove();
24 25
     };
25 26
   }, []);
26 27
 

+ 88
- 0
website/docs/docs-functional-components.mdx Vedi File

@@ -0,0 +1,88 @@
1
+---
2
+id: functionalComponents
3
+title: Using functional components as screens
4
+sidebar_label: Using functional components
5
+---
6
+
7
+Both class components and functional components can be used as screens. There is no performance difference between the two. Deciding which type component to use boils down to user preference.
8
+
9
+## Declaring static options
10
+Static options are a great way to declare options close to where they are used. Declaring static options is done by first declaring the functional component, and then declaring the options on the function class.
11
+```jsx
12
+const MyScreen = (props) => {
13
+  return (
14
+      <View>
15
+        <Text>Screen Component</Text>
16
+      </View>
17
+    );
18
+};
19
+
20
+MyScreen.options = {
21
+  topBar: {
22
+    background: {
23
+      color: 'red'
24
+    }
25
+  }
26
+}
27
+```
28
+
29
+## Listening to navigation events
30
+Navigation events let you react to various events related to a specific component or the app its self. Read more about them [here](api-events.mdx)
31
+
32
+```jsx
33
+import { useEffect } from 'react';
34
+import Navigation from 'react-native-navigation';
35
+
36
+function MyScreen(props) {
37
+  useEffect(() => {
38
+    const listener = {
39
+      componentDidAppear: () => {
40
+        console.log('RNN', `componentDidAppear`);
41
+      },
42
+      componentDidDisappear: () => {
43
+        console.log('RNN', `componentDidDisappear`);
44
+      }
45
+    };
46
+    // Register the listener to all events related to our component
47
+    const unsubscribe = Navigation.events().bindComponent(listener, props.componentId);
48
+    return () => {
49
+      // Make sure to unregister the listener during cleanup
50
+      unsubscribe.remove();
51
+    };
52
+  }, []);
53
+
54
+  return (
55
+      <View>
56
+        <Text>Screen Component</Text>
57
+      </View>
58
+    );
59
+}
60
+```
61
+
62
+Notice that in the example above, we call `Navigation.events().bindComponent()` to register our listener even though we're not binding any component. That's because our listener is registered with the `componentId` passed in the second argument.
63
+
64
+:::tip
65
+[underscopeio/react-native-navigation-hooks](https://github.com/underscopeio/react-native-navigation-hooks) is a wonderful library which greatly simplifies usage with hooks by introducing dedicated hooks for each event. The following example, which is taken from their docs, shows how to listen to all appear events and a particular screen's appear events:
66
+
67
+```jsx
68
+import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks'
69
+
70
+const ScreenComponent = ({ componentId }) => {
71
+  // Global listener
72
+  useNavigationComponentDidAppear(e => {
73
+    console.log(`${e.componentName} (${e.componentId}) appeared`)
74
+  })
75
+
76
+  // Listen events only for this screen (componentId)
77
+  useNavigationComponentDidAppear(e => {
78
+    console.log(`${e.componentName} appeared`)
79
+  }, componentId)
80
+
81
+  return (
82
+    <View>
83
+      <Text>Screen Component</Text>
84
+    </View>
85
+  )
86
+}
87
+```
88
+:::

+ 1
- 0
website/sidebars.js Vedi File

@@ -12,6 +12,7 @@ module.exports = {
12 12
        'advanced-navigation',
13 13
        'screen-lifecycle',
14 14
        'passing-data-to-components',
15
+       'functionalComponents'
15 16
     ],
16 17
     Layouts: [
17 18
        'stack',