RN 版本：0.50
操作環境：Windows 10
React Navigation 版本：1.0.0-beta.20

在上一篇文章《StackNavigator 快速入門》中，介紹了 StackNavigator 的快速使用方法，本篇在其基礎上進行補充，對 StackNavigator 進行更加詳細的介紹。

StackNavigator 的介紹

我們依然是先寫個首頁用來展示：

export default class HomeScreen extends Component {

  static navigationOptions = {
    title: 'Welcome'
 

  }

  render() {
    return <Text>Hello, Chat App!</Text>;
  }
}

然後通過 StackNavigator 進行註冊：

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
  }
});

可以發現，這裡設定 title 的方式和上一篇不一樣了。上一篇中，我們在對 HomeScreen 進行註冊的時候進行了 headerTitle 的設定，就像下面這樣。

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerTitle: 'Home'
 

    }
  });

而在這篇文章中，我們把 navigationOptions 單獨拿了出來寫成了一個靜態變數。這種寫法也是可以的，當通過 StackNavigator 載入到 Home 頁面的時候，會自動找到這個變數讀取它的各個引數並應用在 Home 頁面上。就像元件的生命週期剛開始的時候會先讀取 static defaultProps 中的預設屬性。

另外在這裡 headerTitle 與 title 的效果是一樣的，都是頂部 ‘ToolBar’ 的標題。它們兩個具體有什麼區別，打算在下一篇文章再做介紹。效果圖直接用官網的。

新增一個新的頁面

這個在上一篇文章也已經說過了，如果你看過上一篇文章，這裡隨便看看就好了。

我們新建一個 ChatScreen 頁面：

export default class ChatScreen extends Component {

  static navigationOptions = {
    title: 'Chat with Lucy',
  }

  render() {
    return (
        <View>
          <Text>Chat with Lucy</Text>
        </View>
    );
  }
}

然後在 HomeScreen 中新增一個按鈕使其被點選的時候能跳轉到 ChatScreen。這裡我們就要用到 navigate 方法並且給它填入正確的 routeName 引數，我們這裡定義的是 Chat 。

export default class HomeScreen extends Component {

  static navigationOptions = {
    title: 'Welcome'
  };

  render() {
    const {navigate} = this.props.navigation;
    return <View>
      <Text>Hello, Chat App!</Text>
      <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
      />
    </View>
  }
}

當然了，最最重要的不要忘記了在 StackNavigator 中進行註冊：

const RootNavigator = StackNavigator({
  Home: {screen: HomeScreen},
  Chat: {screen: ChatScreen}
});

現在，我們點選按鈕就可以進行頁面之間的切換了。

傳遞引數

任何頁面之間的切換都避免不了引數的傳遞。還記得 navigate(routeName, params, action) 方法的第二個引數嗎？params 就是要傳遞的引數。

render() {
    const {navigate} = this.props.navigation;
    return <View>
      <Text>Hello, Chat App!</Text>
      <Button
          onPress={() => navigate('Chat', {user: 'Lucy'})}
          title="Chat with Lucy"
      />
    </View>
  }

這裡我們給 ChatScreen 傳遞了一個值為 ‘Lucy’ 的字串 user，然後就可以通過 this.props.navigation.state.params 來取到你想要的引數。

export default class ChatScreen extends Component {

  // Nav options can be defined as a function of the screen's props:
  // Nav options 可以被定義成一個頁面屬性的函式（原諒我英語太差）
  // 格式就像下面這樣，你就可以取到 navigation 了
  static navigationOptions = ({navigation}) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });

  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    // 螢幕當前的路由被傳遞給了 `props.navigation.state`
    const {params} = this.props.navigation.state;
    return (
        <View>
          <Text>Chat with {params.user}</Text>
        </View>
    );
  }
}

你可以改一下 user 的值，然後看看有什麼變化。

本文到此結束，下一篇打算詳細寫寫 StackNavigator 的各個屬性。