iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
0
Modern Web

React Native 航向真全端,建構雙平台 App系列 第 16

React Native Navigator 學會切換頁面 (一)

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

Navigator

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

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

renderScene

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

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

configureScene

Navigator 的 prop configureScene,他是定義轉換場景的動畫,他會傳入 routerouteStack一樣我們可以根據 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 問喔
創科資訊


上一篇
React Native 如何使用人家寫好的元件
下一篇
React Native Navigator 進階版 使用 react-native-router-flux
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言