開啟對畫框

對畫框會顯示暫時阻擋與主要檢視互動之內容。

對畫框類似彈出式視窗，通常會具有不同的轉場動畫，用於關注一個特定的互動或內容。

使用帶有對畫框畫面的堆疊

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 RootStack = createStackNavigator();

function RootStackScreen() {
  return (
    <RootStack.Navigator>
      <RootStack.Group>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Details" component={DetailsScreen} />
      </RootStack.Group>
      <RootStack.Group screenOptions={{ presentation: 'modal' }}>
        <RootStack.Screen name="MyModal" component={ModalScreen} />
      </RootStack.Group>
    </RootStack.Navigator>
  );
}

在這裡，我們使用 RootStack.Group 元件來建立 2 組畫面。第一組是針對我們一般的畫面，而第二組是針對我們的對話方塊畫面。針對對話方塊群組，我們在 screenOptions 中指定 presentation: 'modal'。這會將此選項套用至群組內的全部畫面。此選項會變更畫面的動畫，從由下到上顯示為動畫，而非由右至左。堆疊導覽器的 presentation 選項可以是 card（預設值）或 modal。modal 行為會從底部滑出畫面，並允許使用者從上方往下滑動來關閉畫面（iOS 上）

除了為群組指定此選項之外，也可以使用 RootStack.Screen 上的 options 屬性，針對單一畫面指定此選項。

摘要

• 如果要變更堆疊導覽器中過場的類型，您可以使用 presentation 選項。
• 將 presentation 設為 modal 時，各畫面便會以類似於對話方塊的方式運作，亦即這些畫面會從下至上過場，而且可能會在背景中顯示前一個畫面的部分內容。
• 在群組中設定 presentation: 'modal' 會讓群組中的全部畫面都變成對話方塊，因此如果要在其他畫面上使用非對話方塊過場，我們會加入另一組具有預設組態的群組。

最佳實務做法

由於對話方塊原本就應該顯示於其他內容之上，因此在使用對話方塊時有幾點需要注意

• 避免將這些對話方塊巢狀置於其他導覽器（如標籤頁或抽屜）中。對話方塊畫面應該定義成是根堆疊的一部分。
• 對話方塊畫面應該位於堆疊的最後一個位置 - 避免將一般畫面推送到對話方塊的上方。
• 堆疊中的第一個畫面會顯示為一般畫面，即使已設定為對話方塊也一樣，因為沒有任何畫面可以顯示在其後方。因此，務必確保對話方塊畫面是推送到一般畫面的上方，或是另一個對話方塊畫面的上方。