fix(RN): 修复页面返回不掉用 componentDidShow 和 componentDidHide 的 bug

NervJS · Dec 29, 2018 · 90901cc · 90901cc
1 parent 8f1d865
commit 90901cc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/packages/taro-router-rn/src/TaroProvider.js b/packages/taro-router-rn/src/TaroProvider.js
@@ -10,7 +10,8 @@ class TaroProvider extends React.Component {
 
   componentDidMount () {
     let {Taro} = this.props
-    this.didBlurSubscription = this.props.navigation.addListener(
+    // didFocus
+    this.didFocusSubscription = this.props.navigation.addListener(
       'didFocus',
       payload => {
         // 页面进入后回退并不会调用 React 生命周期，需要在路由生命周期中绑定 this
@@ -123,7 +124,7 @@ class TaroProvider extends React.Component {
 
   componentWillUnmount () {
     // Remove the listener when you are done
-    this.didBlurSubscription && this.didBlurSubscription.remove()
+    this.didFocusSubscription && this.didFocusSubscription.remove()
   }
 
   render () {

diff --git a/packages/taro-router-rn/src/getWrappedScreen.js b/packages/taro-router-rn/src/getWrappedScreen.js
@@ -114,24 +114,35 @@ function getWrappedScreen (Screen, Taro, globalNavigationOptions = {}) {
     }
 
     componentDidMount () {
-      this.didBlurSubscription = this.props.navigation.addListener(
+      // didFocus
+      this.didFocusSubscription = this.props.navigation.addListener(
         'didFocus',
         payload => {
           // 页面进入后回退并不会调用 React 生命周期，需要在路由生命周期中绑定 this
           Taro.setNavigationBarTitle = this.setNavigationBarTitle.bind(this)
           Taro.setNavigationBarColor = this.setNavigationBarColor.bind(this)
           Taro.showNavigationBarLoading = this.showNavigationBarLoading.bind(this)
           Taro.hideNavigationBarLoading = this.hideNavigationBarLoading.bind(this)
+          // 页面聚焦时，调用 componentDidShow
+          this.getScreenInstance().componentDidShow && this.getScreenInstance().componentDidShow()
+        }
+      )
+
+      // willBlur
+      this.willBlurSubscription = this.props.navigation.addListener(
+        'willBlur',
+        payload => {
+          // 页面将失去焦点，调用 componentDidHide
+          this.getScreenInstance().componentDidHide && this.getScreenInstance().componentDidHide()
         }
       )
-      this.getScreenInstance().componentDidShow && this.getScreenInstance().componentDidShow()
       this.screenRef.current && this.setState({}) // TODO 不然 current 为null ??
     }
 
     componentWillUnmount () {
-      this.getScreenInstance().componentDidHide && this.getScreenInstance().componentDidHide()
       // Remove the listener when you are done
-      this.didBlurSubscription && this.didBlurSubscription.remove()
+      this.didFocusSubscription && this.didFocusSubscription.remove()
+      this.willBlurSubscription && this.willBlurSubscription.remove()
     }
 
     render () {