react-native Navigator 填坑

之前copy別人的代碼，看 Navigator 使用起來還是很簡單的，可是當自己親自去coding的時候，感覺完全不是一回事，這篇博客記錄自己遇到的坑！

問題一：使用 navigator.push 點擊跳轉後，手指滑動可以返回上一頁，但是打log發現並沒有調用 pop 方法，而且還是可以滑動回去，根本原因暫不追究，上代碼：

<span style="font-size:18px;">_addNavigator(component, title){
    var data = null;
    if(title === '首頁'){
      data = this.state.data;
    }
    return <Navigator
      style={{flex:1}}
      initialRoute={{
          component: component,
          title: title,
          passProps:{
            data: data
          }
        }}
      </span><pre name="code" class="javascript"><span style="font-size:18px;">configureScene={(route) => {
        return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
      }}</span>

renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }}/>; }

這個是主要的路由，後來發現關鍵在於：

<span style="font-size:18px;">configureScene={(route) => {
        return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
      }}</span>

詳細配置請看源代碼的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

HorizontalSwipeJumpFromRight: {
    ...BaseConfig,
    gestures: {
      jumpBack: {
        ...BaseRightToLeftGesture,
        overswipe: BaseOverswipeConfig,
        edgeHitWidth: null,
        isDetachable: true,
      },
      jumpForward: {
        ...BaseLeftToRightGesture,
        overswipe: BaseOverswipeConfig,
        edgeHitWidth: null,
        isDetachable: true,
      },
      pop: BaseRightToLeftGesture,
    },
    animationInterpolators: {
      into: buildStyleInterpolator(FromTheLeft),
      out: buildStyleInterpolator(FadeToTheRight),
    },
  },

關鍵就在 gestures:{} 裏面，我們可以在源碼裏找到：

FadeAndroid: {
    ...BaseConfig,
    gestures: null,
    animationInterpolators: {
      into: buildStyleInterpolator(FadeIn),
      out: buildStyleInterpolator(FadeOut),
    },
  },

就不難發現，只要把gestures設置成null，就不能觸摸返回了！

問題二：Navigator傳遞參數問題：

MainPage.js中：

_addNavigator(component, title){
    var data = null;
    if(title === JOURNEY_TAB){
      data = this.state.data;
    }
    return <Navigator
      style={{flex:1}}
      initialRoute={{
          component: component,
          title: title,
          passProps:{
            data: data
          }
        }}
      // configureScene={(route) => {
      //   return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
      // }}
      renderScene={(route, navigator) => {
        let Component = route.component;
        return <Component {...route.params}  navigator={navigator} />
      }}/>;
  }

Journey.js中，list列表選中後，跳轉到詳細頁面：

selectJourney(journey: Object) {
        const {navigator} = this.props;
       
        if(navigator){
            navigator.push({
                name: 'JourneyDetail',
                component: JourneyDetail,
                params: {
                    journeyData: journey,
                }
            });
        }
    }

JourneyDetail.js中，點擊返回按鈕：

_pressBackButton(){
        const { navigator } = this.props;

        if(navigator) {
            navigator.pop();
        }
    }

需求：我現在有TabNavigator，TabNavigator上有Journey、SecondPage、...幾個頁面，需要在從Journey跳轉到JourneyDetail的時候TabNavigator隱藏，然後從JourneyDetail跳轉回來Journey的時候，TabNavigator顯示，隱藏和顯示的方法已經寫好，只需要一個boolean參數就可以了，

因爲看到在MainPage.js中：

renderScene={(route, navigator) => {
        let Component = route.component;
        return <Component {...route.params}  navigator={navigator} />
      }

然後後面的幾個頁面全部都可以通過 

 const { navigator } = this.props;

獲取到navigator,而且MainPage.js中的Component就是對應的TabNavigator上的幾個頁面，所以在想，是不是在

<Component {...route.params}  navigator={navigator} />

上定義的屬性都是可以在之後的幾個頁面的js上獲取到呢？事實證明猜想是對的，於是我把MainPage.js修改爲：

_addNavigator(component, title){
    var data = null;
    if(title === JOURNEY_TAB){
      data = this.state.data;
    }
    return <Navigator
      style={{flex:1}}
      initialRoute={{
          component: component,
          title: title,
          passProps:{
            data: data
          }
        }}
      // configureScene={(route) => {
      //   return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
      // }}
      renderScene={(route, navigator) => {
        let Component = route.component;
        return <Component {...route.params} show={(is_show) => {
          this.setState({showTabBar: is_show});
        }} navigator={navigator} />
      }}/>;
  }

增加了一個show={（is_show） => {xxx}}來改變顯示和隱藏的狀態，

Journey.js中，在跳轉到詳細頁面時候，改變狀態：

selectJourney(journey: Object) {
        const {navigator,show} = this.props;
        show(false);
        console.log(show);
        if(navigator){
            navigator.push({
                name: 'JourneyDetail',
                component: JourneyDetail,
                params: {
                    journeyData: journey,
                    show: function(is_show){
                        show(is_show);
                    }
                }
            });
        }
    }

並接收從詳情頁面返回來的參數 is_show;

JourneyDetail.js中：

_pressBackButton(){
        const { navigator } = this.props;

        if(this.props.show){
            this.props.show(true);
        }

        if(navigator) {
            navigator.pop();
        }
    }

點擊返回按鈕的時候，調用pop（）前，

this.props.show(true);

至此，就完成了我想要的效果~~