react navigation中使用多个StackNavigator分模块管理项目

好处是可以让项目各模块结构更加清晰，也便于管理需要做modal跳转的页面，如login

app.js

// 主StackNavigator，里面可以加入别的StackNavigator模块，或者加入screen
const RoutersStack = StackNavigator(
  {
    authenStack:{
      screen: authenStack,
    },
    FinanceManageStack: {
      screen: FinanceManageStack,
    },
    Set: {
      screen: Set,
    },
  },
  StackNavigatorConfig({
    initialRouteName: 'authenStack',
  }),
);
//将HomeIndex和Login单独放在一起，login登录页可以实现modal跳转，如果有别的页面需要modal跳转，也可以单独新建一个StackNavigator来进行管理
const authenStack = StackNavigator({
  HomeIndex: {
    screen: HomeIndex,
  },
  Login:{
    screen:Login,
    navigationOptions:{
      headerTitle:'Login',
    }
  }
},{
  mode:'modal',
});
// 财务管理模块，放财务相关的，FinanceManageHomeIndex是财务管理首页。项目里面可以放多个这种StackNavigator进行管理
const FinanceManageStack=StackNavigator(
  {
    FinanceManageHomeIndex:{
      screen:FinanceManageHomeIndex
    },
    TransactionWithdrawGoWithdraw:{
      screen:TransactionWithdrawGoWithdraw
    },
    TransactionWithdraw:{
      screen:TransactionWithdraw
    }
  },
  StackNavigatorConfig({
    initialRouteName: 'FinanceManageHomeIndex',
  }),
)

  export default class App extends Component {
    componentDidMount() {

    }
    render () {
      return (
        <Provider rootStore={new RootStore()}>
          <RoutersStack />
        </Provider>
      )
    }
}

注意上面的StackNavigatorConfig是我自己写的一个方法，用来配置navigation的，这里可以不写这个方法，按照官网文档写自己的配置

管理页面跳转

我使用过的管理页面跳转主要有方式，
- 使用redux或者mobx来管理navigation
- 使用页面传参navigation，this.props.navigation的navigate进行跳转（这种navigation需要传入每个页面）
- 建立一个全局的RoutesUtils类来管理navigation

这里以第二种为例，大概都差不多：

• 页面跳转直接使用this.props.navigation.navigate(name)。
  注意：如果在一个StackNavigator跳往另外一个模块的主页，记得name不要写screen页面名称，如我需要在别的StackNavigator跳到财务管理模块首页，写this.props.navigation.navigate(‘FinanceManageStack’)，这时会自动打开FinanceManageStack下面的第一个页面FinanceManageHomeIndex，如果写this.props.navigation.navigate（’FinanceManageHomeIndex’），那么FinanceManageHomeIndex会进入两次。
• 返回上一页面

this.props.navigation.goBack()在FinanceManageStack下的第一个有页面使用会失效。如我在FinanceManageHomeIndex页面进行返回跳转，this.props.navigation.goBack()这个方法会失效，在别的页面正常。需要改成this.props.navigation.goBack(null).这里可能有版本差异，我使用的版本是"react-navigation": "1.0.0-beta.21",

为了弄这点东西，折腾了差不多一天,中间好几个坑，感谢竹子（https://blog.csdn.net/u010411264）的支持