浏览代码

Renamed container lifecycle events (#1676)

* Renamed onStop/onStart to didAppear/DidDisappear

* This did't make it!
Johan 7 年前
父节点
当前提交
9f9fddc626

+ 6
- 6
AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/ScreenLifecycleTest.java 查看文件

@@ -7,23 +7,23 @@ import org.junit.Test;
7 7
 public class ScreenLifecycleTest extends BaseTest {
8 8
 
9 9
 	@Test
10
-	public void onStartOnStop() throws Exception {
10
+	public void didAppearDidDisappear() throws Exception {
11 11
 		elementByText("PUSH LIFECYCLE SCREEN").click();
12
-		assertExists(By.text("onStart"));
13
-		elementByText("PUSH TO TEST ONSTOP").click();
14
-		assertExists(By.text("onStop"));
12
+		assertExists(By.text("didAppear"));
13
+		elementByText("PUSH TO TEST DIDDISAPPEAR").click();
14
+		assertExists(By.text("didDisappear"));
15 15
 	}
16 16
 
17 17
 	@Test
18 18
 	public void unmountIsCalledWhenPopped() throws Exception {
19 19
 		elementByText("PUSH LIFECYCLE SCREEN").click();
20
-		assertExists(By.text("onStart"));
20
+		assertExists(By.text("didAppear"));
21 21
 
22 22
 		device().pressBack();
23 23
 
24 24
 		assertExists(By.text("componentWillUnmount"));
25 25
 		elementByText("OK").click();
26
-		assertExists(By.text("onStop"));
26
+		assertExists(By.text("didDisappear"));
27 27
 		elementByText("OK").click();
28 28
 		assertMainShown();
29 29
 	}

+ 6
- 6
README.md 查看文件

@@ -326,9 +326,9 @@ Dismiss all the current modals at the same time.
326 326
 ```js
327 327
 Navigation.dismissAllModals();
328 328
 ```
329
-#### Screen Lifecycle - onStop() and onStart()
329
+#### Screen Lifecycle - didDisppear() and didAppear()
330 330
 
331
-The onStop() and onStart() functions 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:
331
+The didDisppear() and didAppear() functions 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:
332 332
 
333 333
 ```js
334 334
 class LifecycleScreen extends Component {
@@ -339,12 +339,12 @@ class LifecycleScreen extends Component {
339 339
     };
340 340
   }
341 341
 
342
-  onStart() {
343
-    this.setState({ text: 'onStart' });
342
+  didAppear() {
343
+    this.setState({ text: 'didAppear' });
344 344
   }
345 345
 
346
-  onStop() {
347
-    alert('onStop');
346
+  didDisppear() {
347
+    alert('didDisppear');
348 348
   }
349 349
 
350 350
   componentWillUnmount() {

+ 5
- 5
e2e/TopLevelApi.test.js 查看文件

@@ -25,17 +25,17 @@ describe('top level api', () => {
25 25
 
26 26
   it('screen lifecycle', async () => {
27 27
     await elementByLabel('Push Lifecycle Screen').tap();
28
-    await expect(elementByLabel('onStart')).toBeVisible();
29
-    await elementByLabel('Push to test onStop').tap();
28
+    await expect(elementByLabel('didAppear')).toBeVisible();
29
+    await elementByLabel('Push to test didDisappear').tap();
30 30
     await expect(elementByLabel('Alert')).toBeVisible();
31
-    await expect(elementByLabel('onStop')).toBeVisible();
31
+    await expect(elementByLabel('didDisappear')).toBeVisible();
32 32
   });
33 33
 
34 34
   it('unmount is called on pop', async () => {
35 35
     await elementByLabel('Push Lifecycle Screen').tap();
36
-    await expect(elementByLabel('onStart')).toBeVisible();
36
+    await expect(elementByLabel('didAppear')).toBeVisible();
37 37
     await element(by.traits(['button']).and(by.label('Back'))).tap();
38
-    await expect(elementByLabel('onStop')).toBeVisible();
38
+    await expect(elementByLabel('didDisappear')).toBeVisible();
39 39
     await expect(elementByLabel('componentWillUnmount')).toBeVisible();
40 40
   });
41 41
 });

+ 2
- 2
lib/android/app/src/main/java/com/reactnativenavigation/layout/ReactRootViewController.java 查看文件

@@ -45,13 +45,13 @@ public class ReactRootViewController extends ViewController implements Navigatio
45 45
 	public void onViewAppeared() {
46 46
 		super.onViewAppeared();
47 47
 		applyNavigationOptions();
48
-		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerStart(getId());
48
+		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerDidAppear(getId());
49 49
 	}
50 50
 
51 51
 	@Override
52 52
 	public void onViewDisappear() {
53 53
 		super.onViewDisappear();
54
-		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerStop(getId());
54
+		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerDidDisappear(getId());
55 55
 	}
56 56
 
57 57
 	@Override

+ 6
- 6
lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationEvent.java 查看文件

@@ -9,8 +9,8 @@ import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDevice
9 9
 
10 10
 public class NavigationEvent {
11 11
 	private static final String onAppLaunched = "RNN.appLaunched";
12
-	private static final String containerStart = "RNN.containerStart";
13
-	private static final String containerStop = "RNN.containerStop";
12
+	private static final String containerDidAppear = "RNN.containerDidAppear";
13
+	private static final String containerDidDisappear = "RNN.containerDidDisappear";
14 14
 
15 15
 	private final RCTDeviceEventEmitter emitter;
16 16
 
@@ -22,12 +22,12 @@ public class NavigationEvent {
22 22
 		emit(onAppLaunched);
23 23
 	}
24 24
 
25
-	public void containerStop(String id) {
26
-		emit(containerStop, id);
25
+	public void containerDidDisappear(String id) {
26
+		emit(containerDidDisappear, id);
27 27
 	}
28 28
 
29
-	public void containerStart(String id) {
30
-		emit(containerStart, id);
29
+	public void containerDidAppear(String id) {
30
+		emit(containerDidAppear, id);
31 31
 	}
32 32
 
33 33
 	private void emit(String eventName) {

+ 2
- 2
lib/ios/RNNEventEmitter.h 查看文件

@@ -8,8 +8,8 @@
8 8
 
9 9
 -(void)sendOnAppLaunched;
10 10
 
11
--(void)sendContainerStart:(NSString*)containerId;
11
+-(void)sendContainerDidAppear:(NSString*)containerId;
12 12
 
13
--(void)sendContainerStop:(NSString*)containerId;
13
+-(void)sendContainerDidDisappear:(NSString*)containerId;
14 14
 
15 15
 @end

+ 7
- 7
lib/ios/RNNEventEmitter.m 查看文件

@@ -5,12 +5,12 @@
5 5
 RCT_EXPORT_MODULE();
6 6
 
7 7
 static NSString* const onAppLaunched	= @"RNN.appLaunched";
8
-static NSString* const containerStart	= @"RNN.containerStart";
9
-static NSString* const containerStop	= @"RNN.containerStop";
8
+static NSString* const containerDidAppear	= @"RNN.containerDidAppear";
9
+static NSString* const containerDidDisappear	= @"RNN.containerDidDisappear";
10 10
 
11 11
 
12 12
 -(NSArray<NSString *> *)supportedEvents {
13
-	return @[onAppLaunched, containerStart, containerStop];
13
+	return @[onAppLaunched, containerDidAppear, containerDidDisappear];
14 14
 }
15 15
 
16 16
 # pragma mark public
@@ -19,12 +19,12 @@ static NSString* const containerStop	= @"RNN.containerStop";
19 19
 	[self send:onAppLaunched body:nil];
20 20
 }
21 21
 
22
--(void)sendContainerStart:(NSString *)containerId {
23
-	[self send:containerStart body:containerId];
22
+-(void)sendContainerDidAppear:(NSString *)containerId {
23
+	[self send:containerDidAppear body:containerId];
24 24
 }
25 25
 
26
--(void)sendContainerStop:(NSString *)containerId {
27
-	[self send:containerStop body:containerId];
26
+-(void)sendContainerDidDisappear:(NSString *)containerId {
27
+	[self send:containerDidDisappear body:containerId];
28 28
 }
29 29
 
30 30
 # pragma mark private

+ 2
- 2
lib/ios/RNNRootViewController.m 查看文件

@@ -45,12 +45,12 @@
45 45
 
46 46
 -(void)viewDidAppear:(BOOL)animated {
47 47
 	[super viewDidAppear:animated];
48
-	[self.eventEmitter sendContainerStart:self.containerId];
48
+	[self.eventEmitter sendContainerDidAppear:self.containerId];
49 49
 }
50 50
 
51 51
 -(void)viewDidDisappear:(BOOL)animated {
52 52
 	[super viewDidDisappear:animated];
53
-	[self.eventEmitter sendContainerStop:self.containerId];
53
+	[self.eventEmitter sendContainerDidDisappear:self.containerId];
54 54
 }
55 55
 
56 56
 /**

+ 4
- 4
lib/src/adapters/NativeEventsReceiver.js 查看文件

@@ -5,12 +5,12 @@ class NativeEventsReceiver {
5 5
     this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
6 6
   }
7 7
 
8
-  containerStart(callback) {
9
-    this.emitter.addListener('RNN.containerStart', callback);
8
+  containerDidAppear(callback) {
9
+    this.emitter.addListener('RNN.containerDidAppear', callback);
10 10
   }
11 11
 
12
-  containerStop(callback) {
13
-    this.emitter.addListener('RNN.containerStop', callback);
12
+  containerDidDisappear(callback) {
13
+    this.emitter.addListener('RNN.containerDidDisappear', callback);
14 14
   }
15 15
 
16 16
   appLaunched(callback) {

+ 6
- 6
lib/src/containers/ContainerWrapper.js 查看文件

@@ -38,15 +38,15 @@ class ContainerWrapper {
38 38
         store.cleanId(this.state.containerId);
39 39
       }
40 40
 
41
-      onStart() {
42
-        if (this.originalContainerRef.onStart) {
43
-          this.originalContainerRef.onStart();
41
+      didAppear() {
42
+        if (this.originalContainerRef.didAppear) {
43
+          this.originalContainerRef.didAppear();
44 44
         }
45 45
       }
46 46
 
47
-      onStop() {
48
-        if (this.originalContainerRef.onStop) {
49
-          this.originalContainerRef.onStop();
47
+      didDisappear() {
48
+        if (this.originalContainerRef.didDisappear) {
49
+          this.originalContainerRef.didDisappear();
50 50
         }
51 51
       }
52 52
 

+ 17
- 17
lib/src/containers/ContainerWrapper.test.js 查看文件

@@ -138,40 +138,40 @@ describe('ContainerWrapper', () => {
138 138
   });
139 139
 
140 140
   describe('container lifecycle', () => {
141
-    const onStartCallback = jest.fn();
142
-    const onStopCallback = jest.fn();
141
+    const didAppearCallback = jest.fn();
142
+    const didDisappearCallback = jest.fn();
143 143
 
144 144
     class MyLifecycleContainer extends MyContainer {
145
-      onStart() {
146
-        onStartCallback();
145
+      didAppear() {
146
+        didAppearCallback();
147 147
       }
148 148
 
149
-      onStop() {
150
-        onStopCallback();
149
+      didDisappear() {
150
+        didDisappearCallback();
151 151
       }
152 152
     }
153 153
 
154
-    it('onStart and onStop are optional', () => {
154
+    it('didAppear and didDisappear are optional', () => {
155 155
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
156 156
       const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
157
-      expect(() => tree.getInstance().onStart()).not.toThrow();
158
-      expect(() => tree.getInstance().onStop()).not.toThrow();
157
+      expect(() => tree.getInstance().didAppear()).not.toThrow();
158
+      expect(() => tree.getInstance().didDisappear()).not.toThrow();
159 159
     });
160 160
 
161
-    it('calls onStart on OriginalContainer', () => {
161
+    it('calls didAppear on OriginalContainer', () => {
162 162
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
163 163
       const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
164
-      expect(onStartCallback).toHaveBeenCalledTimes(0);
165
-      tree.getInstance().onStart();
166
-      expect(onStartCallback).toHaveBeenCalledTimes(1);
164
+      expect(didAppearCallback).toHaveBeenCalledTimes(0);
165
+      tree.getInstance().didAppear();
166
+      expect(didAppearCallback).toHaveBeenCalledTimes(1);
167 167
     });
168 168
 
169
-    it('calls onSop on OriginalContainer', () => {
169
+    it('calls didDisappear on OriginalContainer', () => {
170 170
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
171 171
       const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
172
-      expect(onStopCallback).toHaveBeenCalledTimes(0);
173
-      tree.getInstance().onStop();
174
-      expect(onStopCallback).toHaveBeenCalledTimes(1);
172
+      expect(didDisappearCallback).toHaveBeenCalledTimes(0);
173
+      tree.getInstance().didDisappear();
174
+      expect(didDisappearCallback).toHaveBeenCalledTimes(1);
175 175
     });
176 176
   });
177 177
 });

+ 8
- 8
lib/src/containers/Lifecycle.js 查看文件

@@ -1,21 +1,21 @@
1 1
 class Lifecycle {
2 2
   constructor(store) {
3 3
     this.store = store;
4
-    this.containerStart = this.containerStart.bind(this);
5
-    this.containerStop = this.containerStop.bind(this);
4
+    this.containerDidAppear = this.containerDidAppear.bind(this);
5
+    this.containerDidDisappear = this.containerDidDisappear.bind(this);
6 6
   }
7 7
 
8
-  containerStart(id) {
8
+  containerDidAppear(id) {
9 9
     const ref = this.store.getRefForContainerId(id);
10
-    if (ref && ref.onStart) {
11
-      ref.onStart();
10
+    if (ref && ref.didAppear) {
11
+      ref.didAppear();
12 12
     }
13 13
   }
14 14
 
15
-  containerStop(id) {
15
+  containerDidDisappear(id) {
16 16
     const ref = this.store.getRefForContainerId(id);
17
-    if (ref && ref.onStop) {
18
-      ref.onStop();
17
+    if (ref && ref.didDisappear) {
18
+      ref.didDisappear();
19 19
     }
20 20
   }
21 21
 }

+ 20
- 20
lib/src/containers/Lifecycle.test.js 查看文件

@@ -8,8 +8,8 @@ describe('Lifecycle', () => {
8 8
 
9 9
   beforeEach(() => {
10 10
     mockRef = {
11
-      onStart: jest.fn(),
12
-      onStop: jest.fn()
11
+      didAppear: jest.fn(),
12
+      didDisappear: jest.fn()
13 13
     };
14 14
     store = new Store();
15 15
     store.setRefForContainerId('myUniqueId', mockRef);
@@ -17,41 +17,41 @@ describe('Lifecycle', () => {
17 17
     uut = new Lifecycle(store);
18 18
   });
19 19
 
20
-  describe('containerStart', () => {
21
-    it('calls onStart on container ref from store', () => {
22
-      uut.containerStart('myUniqueId');
23
-      expect(mockRef.onStart).toHaveBeenCalledTimes(1);
20
+  describe('containerDidAppear', () => {
21
+    it('calls didAppear on container ref from store', () => {
22
+      uut.containerDidAppear('myUniqueId');
23
+      expect(mockRef.didAppear).toHaveBeenCalledTimes(1);
24 24
     });
25 25
 
26 26
     it('skips undefined refs', () => {
27
-      uut.containerStart('myUniqueId2');
28
-      expect(mockRef.onStart).not.toHaveBeenCalled();
27
+      uut.containerDidAppear('myUniqueId2');
28
+      expect(mockRef.didAppear).not.toHaveBeenCalled();
29 29
     });
30 30
 
31
-    it('skips unimplemented onStart', () => {
31
+    it('skips unimplemented didAppear', () => {
32 32
       mockRef = {};
33
-      expect(mockRef.onStart).toBeUndefined();
33
+      expect(mockRef.didAppear).toBeUndefined();
34 34
       store.setRefForContainerId('myUniqueId', mockRef);
35
-      uut.containerStart('myUniqueId');
35
+      uut.containerDidAppear('myUniqueId');
36 36
     });
37 37
   });
38 38
 
39
-  describe('containerStop', () => {
40
-    it('calls onStop on container ref from store', () => {
41
-      uut.containerStop('myUniqueId');
42
-      expect(mockRef.onStop).toHaveBeenCalledTimes(1);
39
+  describe('containerDidDisappear', () => {
40
+    it('calls didDisappear on container ref from store', () => {
41
+      uut.containerDidDisappear('myUniqueId');
42
+      expect(mockRef.didDisappear).toHaveBeenCalledTimes(1);
43 43
     });
44 44
 
45 45
     it('skips undefined refs', () => {
46
-      uut.containerStop('myUniqueId2');
47
-      expect(mockRef.onStop).not.toHaveBeenCalled();
46
+      uut.containerDidDisappear('myUniqueId2');
47
+      expect(mockRef.didDisappear).not.toHaveBeenCalled();
48 48
     });
49 49
 
50
-    it('skips unimplemented onStop', () => {
50
+    it('skips unimplemented didDisappear', () => {
51 51
       mockRef = {};
52
-      expect(mockRef.onStop).toBeUndefined();
52
+      expect(mockRef.didDisappear).toBeUndefined();
53 53
       store.setRefForContainerId('myUniqueId', mockRef);
54
-      uut.containerStop('myUniqueId');
54
+      uut.containerDidDisappear('myUniqueId');
55 55
     });
56 56
   });
57 57
 });

+ 2
- 2
lib/src/events/PrivateEventsListener.js 查看文件

@@ -7,8 +7,8 @@ class PrivateEventsListener {
7 7
   }
8 8
 
9 9
   listenAndHandlePrivateEvents() {
10
-    this.nativeEventsReceiver.containerStart(this.lifecycle.containerStart);
11
-    this.nativeEventsReceiver.containerStop(this.lifecycle.containerStop);
10
+    this.nativeEventsReceiver.containerDidAppear(this.lifecycle.containerDidAppear);
11
+    this.nativeEventsReceiver.containerDidDisappear(this.lifecycle.containerDidDisappear);
12 12
   }
13 13
 }
14 14
 

+ 8
- 8
lib/src/events/PrivateEventsListener.test.js 查看文件

@@ -13,24 +13,24 @@ describe('PrivateEventsListener', () => {
13 13
     uut = new PrivateEventsListener(nativeEventsReceiver, store);
14 14
   });
15 15
 
16
-  it('register and handle containerStart', () => {
16
+  it('register and handle containerDidAppear', () => {
17 17
     const mockRef = {
18
-      onStart: jest.fn()
18
+      didAppear: jest.fn()
19 19
     };
20 20
     store.setRefForContainerId('myContainerId', mockRef);
21 21
     uut.listenAndHandlePrivateEvents();
22
-    expect(nativeEventsReceiver.containerStart).toHaveBeenCalledTimes(1);
23
-    const callbackFunction = nativeEventsReceiver.containerStart.mock.calls[0][0];
22
+    expect(nativeEventsReceiver.containerDidAppear).toHaveBeenCalledTimes(1);
23
+    const callbackFunction = nativeEventsReceiver.containerDidAppear.mock.calls[0][0];
24 24
     expect(callbackFunction).toBeInstanceOf(Function);
25 25
 
26
-    expect(mockRef.onStart).not.toHaveBeenCalled();
26
+    expect(mockRef.didAppear).not.toHaveBeenCalled();
27 27
     callbackFunction('myContainerId');
28 28
 
29
-    expect(mockRef.onStart).toHaveBeenCalledTimes(1);
29
+    expect(mockRef.didAppear).toHaveBeenCalledTimes(1);
30 30
   });
31 31
 
32
-  it('register and listen containerStop', () => {
32
+  it('register and listen containerDidDisappear', () => {
33 33
     uut.listenAndHandlePrivateEvents();
34
-    expect(nativeEventsReceiver.containerStop).toHaveBeenCalledTimes(1);
34
+    expect(nativeEventsReceiver.containerDidDisappear).toHaveBeenCalledTimes(1);
35 35
   });
36 36
 });

+ 5
- 5
playground/src/containers/LifecycleScreen.js 查看文件

@@ -14,12 +14,12 @@ class LifecycleScreen extends Component {
14 14
     };
15 15
   }
16 16
 
17
-  onStart() {
18
-    this.setState({ text: 'onStart' });
17
+  didAppear() {
18
+    this.setState({ text: 'didAppear' });
19 19
   }
20 20
 
21
-  onStop() {
22
-    alert('onStop'); // eslint-disable-line no-alert
21
+  didDisappear() {
22
+    alert('didDisappear'); // eslint-disable-line no-alert
23 23
   }
24 24
 
25 25
   componentWillUnmount() {
@@ -31,7 +31,7 @@ class LifecycleScreen extends Component {
31 31
       <View style={styles.root}>
32 32
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
33 33
         <Text style={styles.h1}>{this.state.text}</Text>
34
-        <Button title="Push to test onStop" onPress={this.onClickPush} />
34
+        <Button title="Push to test didDisappear" onPress={this.onClickPush} />
35 35
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
36 36
       </View>
37 37
     );

+ 6
- 6
v1tov2diff.md 查看文件

@@ -289,9 +289,9 @@ Dismiss all the current modals at the same time.
289 289
 ```js
290 290
 Navigation.dismissAllModals();
291 291
 ```
292
-#### Screen Lifecycle - onStop() and onStart()
292
+#### Screen Lifecycle - didDisappear() and didAppear()
293 293
 
294
-The onStop() and onStart() functions 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
+The didDisappear() and didAppear() functions 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:
295 295
 
296 296
 ```js
297 297
 class LifecycleScreen extends Component {
@@ -302,12 +302,12 @@ class LifecycleScreen extends Component {
302 302
     };
303 303
   }
304 304
 
305
-  onStart() {
306
-    this.setState({ text: 'onStart' });
305
+  didAppear() {
306
+    this.setState({ text: 'didAppear' });
307 307
   }
308 308
 
309
-  onStop() {
310
-    alert('onStop');
309
+  didDisappear() {
310
+    alert('didDisappear');
311 311
   }
312 312
 
313 313
   componentWillUnmount() {