Преглед на файлове

Update documentation to avoid confusion on component layout type (#4129)

Adrien Thiery преди 6 години
родител
ревизия
3b62b01e30
променени са 2 файла, в които са добавени 22 реда и са изтрити 1 реда
  1. 2
    0
      docs/docs/Installing.md
  2. 20
    1
      docs/docs/Usage.md

+ 2
- 0
docs/docs/Installing.md Целия файл

366
 +  });
366
 +  });
367
 +});
367
 +});
368
 ```
368
 ```
369
+
370
+⚠️ we use the layout type `component` here, which renders a React component but does not allow you to navigate to others. See [Usage](./Usage.md) and [LayoutTypes](./layout-types.md) for more options.

+ 20
- 1
docs/docs/Usage.md Целия файл

37
 });
37
 });
38
 ```
38
 ```
39
 
39
 
40
+As specified in the [LayoutTypes](./layout-types.md) part of the documentation, we use the layout type `component` here, which renders a React component but does not allow you to navigate to others.
41
+
42
+If you want to navigate, use a `stack` layout type:
43
+```js
44
+Navigation.events().registerAppLaunchedListener(() => {
45
+  Navigation.setRoot({
46
+    root: {
47
+      stack: {
48
+        children: [{
49
+          component: {
50
+            name: "navigation.playground.WelcomeScreen"
51
+          }
52
+        }]
53
+      }
54
+    }
55
+  });
56
+});
57
+```
58
+
40
 ## Screen Lifecycle
59
 ## Screen Lifecycle
41
 
60
 
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)`). 
61
 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)`). 
79
     return (
98
     return (
80
       <View style={styles.root}>
99
       <View style={styles.root}>
81
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
100
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
82
-	      <Text style={styles.h1}>{this.state.text}</Text>
101
+        <Text style={styles.h1}>{this.state.text}</Text>
83
       </View>
102
       </View>
84
     );
103
     );
85
   }
104
   }