好處是可以讓專案各模組結構更加清晰，也便於管理需要做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",