React Navigation5.x 第九章 全面屏model

上圖中顯示了一個完全鋪滿整個屏幕的model

。model就像一個彈窗------它不是你導航中的頁面-----其顯示與隱藏都有其獨特的方式，會向你展示一些特別的信息。

將這個作爲React Navigation框架的一部分進行講解的目的不僅僅是因爲其是我們經常會用到的，而且這也是實現嵌套導航所需掌握的知識點。其是React Navigation中很重要的一部分。

創建一個model堆棧導航器

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}

function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

const MainStack = createStackNavigator();
const RootStack = createStackNavigator();

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

function RootStackScreen() {
  return (
    <RootStack.Navigator mode="modal">
      <RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen name="MyModal" component={ModalScreen} />
    </RootStack.Navigator>
  );
}

需要注意的有一下幾點：

• 當我們使用MainStackScreen作爲RootStackScreen的屏幕組件時，就相當於我們在一個堆棧導航器中嵌入了另一個堆棧導航器。在這種場景下對我們是非常有用的，因爲我們想要使用不同的屏幕過度風格。這樣，RootStackScreen會渲染一個堆棧導航器，該導航器有自己的頭部，我們也可以將這個頭部隱藏。將來的話，這個對於tab導航器也是很重要的，例如我們給每一個標籤欄嵌套一個堆棧導航器，直觀上來看，這就是你所期望的：當你在標籤頁A上並且想要跳轉到標籤頁B上，在瀏覽標籤頁B的同時保持住標籤頁A的導航狀態。我們來看一下下面的簡圖來查看上面例子中的導航架構

• 堆棧導航器的model屬性值可以是card(默認)或者model。在IOS上，model的展現方式是從底部滑入，並且允許用戶已從上往下輕掃的方式來關閉它。在Android上，model是無效的屬性，因爲全面屏的model與android的平臺自帶的行爲沒有任何區別。
• 當我們調用navigate方法的時候，我們沒必要指定任何具體的路徑，也沒必要糾結於其屬於哪個堆棧導航器，React Navigation會在已關閉的導航器中查找該路徑並且跳轉過去。爲了驗證這個，我們再次來看上面的簡圖並且想象一下navigate路由請求會從HomeScreen逐級上升到MainStack中，我們知道MainStack也不能處理這個路由MyModal，所以它會繼續上升到RootStack，這個導航器可以處理這個路由請求。

總結

• 想要變更堆棧導航器頁面的過渡動畫你可以使用mode屬性。當將其設置爲modal時，所有屏幕轉換之間的過渡動畫就會變爲從底部滑到頂部，而不是原先的從右側滑入。其會對整個堆棧導航器起效，所以爲了在其他屏幕上使用從右側滑入的效果，我們可以爲另外添加導航器，這個導航器使用默認的配置就行。
• navigation.navigate方法會逐級向上便利整個導航樹，知道找到可以處理導航路由請求的導航器。