react-navigation结合mobx使用

前言

以tabNavigation为例，之前由于兼容性问题，tabBar都有我们自定义扩展。但导致的问题是需要把navigate作为全局变量，且当前跳转的tab还需跨组件交互，代码不清晰，不易于理解。
现在结合mobx来实现状态托管，且数据绑定，可以很好的实现该功能。
备注：以下代码以TabNavigator为例，但是StackNavigator一样适用

Code

1.store代码

// tabNavigation相关
@observable 
tabBar = {
  _navigator: null,
  // 当前tab的下标
  tabIndex: 0
}

/**
 * 设置ref对象
 * @param {tabNavigation ref对象} navigator
 */
setNavigation(navigator) {
  this.tabBar._navigator = navigator
}

/**
 * tabNavigation路由跳转
 * @param {路由名称} routeName
 * @param {路由参数} params
 */
@action 
tabJump(routeName, params) {
  this.tabBar._navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  )

  // 修改下标
  let routes = this.tabBar._navigator.state.nav.routes
  for (let index in routes) {
    if (routes[index].routeName === routeName) {
      this.tabBar.tabIndex = index
      break
    }
  }
}

2.设置navigator

render(){
    const Tab = TabNavigator(
        {
            Screen: {
                screen:  View,
                navigationOptions: {
                    tabBarVisible: false
                }
            }
        },
        {
            lazy:true,
            animationEnabled: true,
            swipeEnabled: false,
            scrollEnabled: true,
            backBehavior: 'none ',
            tabBarPosition: 'top',
        });

    return(
        <View style={{flex:1}}>
            <Tab ref={(ref) => billboardStore.setNavigation(ref)}/>
        </View>
    )
}