|
|
@@ -6,22 +6,22 @@ We are rebuilding react-native-navigation
|
|
6
|
6
|
- [Getting Started](#getting-started-with-v2)
|
|
7
|
7
|
- [Usage](#usage)
|
|
8
|
8
|
|
|
9
|
|
-## Why Rebuild react-native-navigation?
|
|
|
9
|
+## Why Rebuild react-native-navigation?
|
|
10
|
10
|
|
|
11
|
11
|
### A New Improved Core Architecture
|
|
12
|
12
|
react-native-navigation has a few issues which are unsolvable in it’s current architecture. <br>
|
|
13
|
13
|
These issue originate from the same problem: you cannot specify on which screen you wish to make an action. Whenever you want to push, show modal or any other action, the action defaults to originate from your current screen. This covers most use cases but there are some edge cases: <br>
|
|
14
|
14
|
* What if you want to update your navbar icons and the user pops the screen? Your icons might update on the wrong screen.
|
|
15
|
|
-* What if you want to push a screen as a result of a redux action?
|
|
|
15
|
+* What if you want to push a screen as a result of a redux action?
|
|
16
|
16
|
|
|
17
|
|
-There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
|
|
|
17
|
+There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
|
|
18
|
18
|
|
|
19
|
19
|
#### New API
|
|
20
|
|
-To solve this problem in v2, every screen receives as a prop it’s containerId. Whenever you want to perform an action from that screen you need to pass the containerId to the function:
|
|
|
20
|
+To solve this problem in v2, every screen receives as a prop it’s containerId. Whenever you want to perform an action from that screen you need to pass the containerId to the function:
|
|
21
|
21
|
```js
|
|
22
|
22
|
Navigator.pop(this.props.containerId)
|
|
23
|
|
-```
|
|
24
|
|
-### Built for Contributors
|
|
|
23
|
+```
|
|
|
24
|
+### Built for Contributors
|
|
25
|
25
|
Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
|
|
26
|
26
|
v2 is written with contributors in mind from day one.
|
|
27
|
27
|
|
|
|
@@ -46,11 +46,11 @@ Here is the full comparison of features between v1 and v2 (will be updated regul
|
|
46
|
46
|
|---------------------|--------|------------|
|
|
47
|
47
|
| push | ✅ | ✅ |
|
|
48
|
48
|
| pop | ✅ | ✅ |
|
|
49
|
|
-| showModal | ✅ | ✅ |
|
|
|
49
|
+| showModal | ✅ | ✅ |
|
|
50
|
50
|
| popToRoot | ✅ | ✅ |
|
|
51
|
51
|
| resetTo | ✅ | ✅ |
|
|
52
|
52
|
| dismissModal | ✅ | ✅ |
|
|
53
|
|
-| dismissAllModals | ✅ | ✅ Only iOS [Contribute](CONTRIBUTING.md) |
|
|
|
53
|
+| dismissAllModals | ✅ | ✅ |
|
|
54
|
54
|
| showLightBox | ✅ | [Contribute](CONTRIBUTING.md) |
|
|
55
|
55
|
| dismissLightBox | ✅ | [Contribute](CONTRIBUTING.md) |
|
|
56
|
56
|
| handleDeepLink | ✅ | [Contribute](CONTRIBUTING.md) |
|
|
|
@@ -64,17 +64,17 @@ Here is the full comparison of features between v1 and v2 (will be updated regul
|
|
64
|
64
|
| toggleNavBar | ✅ | [Contribute](CONTRIBUTING.md) |
|
|
65
|
65
|
| Screen Visibility | ✅ | ✅ |
|
|
66
|
66
|
|
|
67
|
|
-Element tranisitions, adding buttons and styles are not yet implemented. [Contribute](CONTRIBUTING.md)
|
|
|
67
|
+Element tranisitions, adding buttons and styles are not yet implemented. [Contribute](CONTRIBUTING.md)
|
|
68
|
68
|
|
|
69
|
69
|
## Getting started with v2
|
|
70
|
70
|
If v2 supports everything you need for your app we encourage you to use it.
|
|
71
|
71
|
|
|
72
|
|
-### Installation
|
|
|
72
|
+### Installation
|
|
73
|
73
|
1. Download react-native-navigation v2
|
|
74
|
74
|
```bash
|
|
75
|
75
|
yarn add react-native-navigation@alpha
|
|
76
|
76
|
```
|
|
77
|
|
-##### iOS
|
|
|
77
|
+##### iOS
|
|
78
|
78
|
2. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
|
|
79
|
79
|
|
|
80
|
80
|
3. In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
|
|
|
@@ -192,7 +192,7 @@ Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => Welcom
|
|
192
|
192
|
```
|
|
193
|
193
|
|
|
194
|
194
|
#### setRoot({params})
|
|
195
|
|
-Start a Single page app with two side menus:
|
|
|
195
|
+Start a Single page app with two side menus:
|
|
196
|
196
|
```js
|
|
197
|
197
|
Navigation.setRoot({
|
|
198
|
198
|
container: {
|
|
|
@@ -218,7 +218,7 @@ Navigation.setRoot({
|
|
218
|
218
|
}
|
|
219
|
219
|
});
|
|
220
|
220
|
```
|
|
221
|
|
-Start a tab based app:
|
|
|
221
|
+Start a tab based app:
|
|
222
|
222
|
```js
|
|
223
|
223
|
Navigation.setRoot({
|
|
224
|
224
|
tabs: [
|
|
|
@@ -290,7 +290,7 @@ Navigation.dismissAllModals();
|
|
290
|
290
|
```
|
|
291
|
291
|
#### Screen Lifecycle - onStop() and onStart()
|
|
292
|
292
|
|
|
293
|
|
-the onStop() and onStart() function are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. to use them simply add them to your component like any other react lifecycle function:
|
|
|
293
|
+the onStop() and onStart() function are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. to use them simply add them to your component like any other react lifecycle function:
|
|
294
|
294
|
|
|
295
|
295
|
```js
|
|
296
|
296
|
class LifecycleScreen extends Component {
|
Daniel Zlotin
7 years ago