在一個 App 內不可能只有一個頁面，一定會使用到換頁的動作，所以這個時候我們要使用一個元件叫做 Navigator他能幫我們切換到下一個頁面。

Navigator

使用方法一樣直接 import { Navigator } from 'react-native' 就能直接使用了，範例:

<Navigator
  style={{ flex: 1 }}
  initialRoute={{}}
  configureScene={(route, routeStack) => {}}
  renderScene={(route, navigator) => {}}
/>

renderScene

Navigator 的 prop renderScene ，他會傳入 route 跟 navigator 我們可以根據 route 傳入的值用一個 switch 去判斷要 render 哪個 View，而 navigator 他提供一些 api 能使用像是
navigator.push、navigator.pop

• navigator.push - 可以把要切換參數推進去 Navigator，renderScene 就會觸發，就能用剛剛提到的 route 去做判斷顯示的部分
• navigator.pop - 可以退回去上一個 Scene

configureScene

Navigator 的 prop configureScene，他是定義轉換場景的動畫，他會傳入 route 跟 routeStack一樣我們可以根據 route 傳入的值用一個 switch 去判斷要回傳哪種動畫配置，文件上有提供一些參數可以使用

• Navigator.SceneConfigs.PushFromRight (default)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.SwipeFromLeft
• Navigator.SceneConfigs.HorizontalSwipeJump
• Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
• Navigator.SceneConfigs.HorizontalSwipeJumpFromLeft
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

實際範例:

NavigatorSample

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Navigator
} from 'react-native';
import ButtonSample from '../ButtonSample';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';


export default (props) => {
  let renderScene = (route, nav) => {
    let onBack = () => {
      nav.pop();
    }
    switch (route.id) {
      case 'simple1':
        return <Page1 onBack={onBack}/>;
      case 'simple2':
        return <Page2 onBack={onBack}/>;
      case 'simple3':
        return <Page3 onBack={onBack}/>;
      default:
        return (
          <View style={styles.center}>
            <ButtonSample buttonText={'Page 1'} onPress={() => nav.push({id: 'simple1', })} />
            <ButtonSample buttonText={'Page 2'} onPress={() => nav.push({id: 'simple2', })} />
            <ButtonSample buttonText={'Page 3'} onPress={() => nav.push({id: 'simple3', })} />
          </View>
        )
    }
  }

  let configureScene = (route, routeStack) => {
    switch (route.id) {
      case 'simple1':
        return Navigator.SceneConfigs.VerticalDownSwipeJump
      case 'simple2':
        return Navigator.SceneConfigs.PushFromRight;
      case 'simple3':
        return Navigator.SceneConfigs.FloatFromBottom;
      default:
        return Navigator.SceneConfigs.PushFromRight;
    }
  }

  return (
    <Navigator
      style={{ flex: 1 }}
      initialRoute={{}}
      configureScene={configureScene}
      renderScene={renderScene}
    />
  )
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

這邊用到的 ButtonSample 就是前幾章節介紹的按鈕 Dump Component，可以直接拿來使用喔

Page1.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  TouchableOpacity
} from 'react-native';

export default (props) => (
  <View style={styles.center}>
    <Text style={styles.text}>Page 1</Text>
    <TouchableOpacity onPress={ props.onBack }>
      <Text style={styles.text}>Back</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'powderblue',
  },
  text: {
    color: '#fff', fontSize: 30
  }
});

結果:

有問題歡迎來 React Native Taiwan 問喔
創科資訊