跳至主要內容
版本：6.x

名詞表

注意

這是文件中的新章節，其中缺少很多名詞！請提交拉取請求或議題，提供您認為應在此處說明的名詞。

Navigator是 React 元件，用於決定如何呈現您定義的畫面。它包含Screen元素作為其子元素，用於定義畫面的組態。

NavigationContainer是一個元件，用於管理我們的導航樹狀結構，並包含導航狀態。此元件必須包裝所有導航器結構。通常，我們會在應用程式的根目錄中呈現此元件，通常是從App.js匯出的元件。

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator> // <---- This is a Navigator
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

路由器​

路由器是一組函式，用於決定如何在瀏覽器中處理動作和狀態變更 (類似於 Redux 應用程式中的狀態降低函式)。通常，不需要與路由器直接互動，除非正在撰寫自訂瀏覽器。

畫面元件​

畫面元件是在路線組態中使用的元件。

const Stack = createNativeStackNavigator();

const StackNavigator = (
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen} // <----
    />
    <Stack.Screen
      name="Details"
      component={DetailsScreen} // <----
    />
  </Stack.Navigator>
);

元件名稱中的字尾Screen 完全是可選的，但經常使用慣例；我們可以稱之為Michael，這也可以正常運作。

我們之前發現，畫面元件會提供navigation 屬性。需要注意的是，這只有在畫面由 React Navigation 繪製為路線時才會發生 (例如，回應navigation.navigate)。例如，如果我們將DetailsScreen 繪製為HomeScreen 的子項，則 DetailsScreen 就不會提供navigation 屬性，當您按下主畫面上的「再次前往詳細資訊...」按鈕時，應用程式將執行一個經典的 JavaScript 例外狀況「未定義不是物件」。

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <DetailsScreen />
    </View>
  );
}

"瀏覽屬性參考" 一節進一步說明了這項內容，說明了因應措施，並針對navigation 屬性提供的其他內容提供更多資訊。

此屬性將傳送至所有畫面，它可以用於下列事項

  • dispatch 會將動作傳送至路由器
  • navigate、goBack 等可供以便利的方式傳送動作

瀏覽器也可以接受瀏覽屬性，如果有的話，則應從父瀏覽器取得。

有關更多詳情，請參閱"瀏覽屬性文件"。

"路線屬性參考" 一節進一步說明了這項內容，說明了因應措施，並針對route 屬性提供的其他內容提供更多資訊。

路線屬性​

此屬性將傳送至所有畫面。包含關於目前路線的資訊，例如params、key 和name。

瀏覽器的狀態通常如下所示

{
  key: 'StackRouterRoot',
  index: 1,
  routes: [
    { key: 'A', name: 'Home' },
    { key: 'B', name: 'Profile' },
  ]
}

針對這個瀏覽狀態，有兩個路線 (可能是分頁或堆疊中的卡片)。索引指示「B」的「活動路線」。

可以在這裡閱讀更多關於瀏覽狀態的資訊。

路徑​

每個路徑都是包含一個金鑰來識別它，和一個「名稱」來指定路徑類型的物件。它也可以包含任意參數

{
  key: 'B',
  name: 'Profile',
  params: { id: '123' }
}

也稱為導覽標題、導覽欄、應用程式欄，以及其他許多名稱。這是螢幕頂端包含返回按鈕和螢幕標題的矩形。在 React 導覽中，整個矩形通常稱為標題。