StackNavigator

StackNavigator ：類似於瀏覽器的<a>，點擊時會切換頁面

• navigation.navigate('name')：會切換到指定名稱的畫面，相同名稱第二次使用無效

• navigation.push('name')：會切換並增加指定名稱的畫面，不論是否重複

• navigation.goBack()：返回上一頁

• navigation.navigate('RouteName', { / params / })：將 json 格式，放入navigation.navigate函數的第二個參數，可將參數傳達下去。用 route.params 接收。

• 可以使用navigation.setParams 來更新screen的參數

未帶參數的各種導航函數的使用方法

// App.js
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

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

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


// createStackNavigator是一個返回包含2個屬性的對象的函數：
// Screen和Navigator。
// 它們都是用於配置導航器的React組件
const Stack = createStackNavigator();

function App() {
  return (
  // 所有 react navigation 組件都需要包含在 
  // NavigationContainer 內
    <NavigationContainer>
      <Stack.Navigator>
      // component 屬性接受物件，而不是渲染函數
      // 每個屏幕都可以為導航器指定一些選項，
      // 例如要在標題中呈現的標題。
      // 這些選項可以在boptions 中為每個屏幕組件傳遞
        <Stack.Screen name="Home" 
        component={HomeScreen} 
        options={{ title: 'Overview' }}
        />
        
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

帶有參數的片段範例

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          // 第二個參數，帶入 json 到 'Details'
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  // 在 'Details' 用 route.params 接收傳來的參數
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

可以使用navigation.setParams 來更新screen的參數

// 
function ProfileScreen({ navigation: { setParams } }) {
  render() {
    return (
      <Button
        onPress={() =>
          navigation.setParams({
            friends:
              route.params.friends[0] === 'Brent'
                ? ['Wojciech', 'Szymon', 'Jakub']
                : ['Brent', 'Satya', 'Michaś'],
            title:
              route.params.title === "Brent's Profile"
                ? "Lucy's Profile"
                : "Brent's Profile",
          })
        }
        title="Swap title and friends"
      />
    );
  }
}


//初始參數可以用initialParamsprop 指定：

  <Stack.Screen
    name="Details"
    component={DetailsScreen}
    initialParams={{ itemId: 42 }}
  />

透過 screen 組件 設定 header

Screen組件接受optionsprop，它可以是對象，也可以是返回對象的函數。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        // 帶入 header 相關參數
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

導航到嵌套導航器中的屏幕

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

// 指向 Root/Profile (預設取 Root 內的第一個)
navigation.navigate('Root');

// 指向 Root/Settings
navigation.navigate('Root', { screen: 'Settings' });