雖然是叫做「登入頁面」，但是我需要的功能其實比較像是第一次使用App的時候需要先輸入基本資料的概念，並不是需要連到伺服器去創建帳號，所以我使用這個方法做出來的不是真正的登入頁面，不過成果的操作流程看起來真的很像有登入一樣，所以如過是要Demo樣品的話還是可以參考一下這個「擬似」登入頁面的做法～

Step1：將登入頁面安排放在Tab bar中的第五個頁面

//1
<Tab.Screen name="首頁" component={HomeStack}
  options={props => {
    return {tabBarVisible: !props.route.state || props.route.state.index === 0,};}}/>
//2
<Tab.Screen name="地點篇" component={LocationStack}
  options={props => {
    return {tabBarVisible: !props.route.state || props.route.state.index === 0,};}}/>
//3
<Tab.Screen name="資訊聯絡篇" component={ContactStack}
  options={props => {
    return {tabBarVisible: !props.route.state || props.route.state.index === 0,};}}/>
//4
<Tab.Screen name="排行榜" component={RankStack} />
//5
<Tab.Screen name="login" component={LoginScreen}
  options={() => {return {tabBarVisible: false,};}} />

Step2：在tabBarOptions將每一個tab的寬度設定為125%

<Tab.Navigator
      tabBarOptions={{
        style: {
          width: "125%",
        }
      }}
>

這麼做的話登入頁面的tab按鈕就會跑到畫面外看不到了!

Step3：將Tab.Navigator的initialRouteName參數設定為登入頁面

<Tab.Navigator
      initialRouteName="login"
      tabBarOptions={{
        style: {
          width: "125%",
        }
      }}
>

Step4：配合記錄上次關閉前的頁面的功能就可以做出「擬似」登入頁面了！！

記錄上次關閉前的頁面詳情請參考[蚊子的Day23]記錄上次關閉前的畫面～React Native