ReactNative的ViewPagerAndroid簡述

ViewPager是Android中比較常見的頁面切換控件, 同時, 在UIExplorerApp中也有ViewPagerAndroid的示例. 通過使用這個控件, 理解ReactNative的實現邏輯. 我們現在來分析一下ViewPager的使用方式和ReactNative的編程要點, 本文注釋也很清晰.

效果

1. 准備

新建ReactNative的項目.

npm install -g react-native-cli
react-native init [TestViewPager]

-g是全局, react-native-cli是react-native的命令行工具(command line interface). 安裝需要管理員權限(sudo), 安裝一次即可, 使用react-native命令. 參考.

修改項目架構, 主頁直接跳轉至ViewPager模塊.

'use strict';

var React = require('react-native');

var {
  AppRegistry,
} = React;

var ViewPagerModule = require('./ViewPagerModule/index')

AppRegistry.registerComponent('TestViewPager', () => ViewPagerModule);

2. 概述

ViewPager包含若干滑動頁面; 點贊選項-模擬頁面交互; 按鍵和滾動條-模擬滾動監聽.

'use strict'

var React = require('react-native');

var {
  View,
  Text,
  Image,
  TouchableNativeFeedback, // 觸碰響應
  TouchableOpacity, // 觸碰更換透明度的屬性
  ViewPagerAndroid, // Android的ViewPager
} = React;

// Styles
var styles = require('./style');

var PAGES = 5; // 頁數

// 顏色
var BGCOLOR = ['#8ad3da', '#eecde2', '#e682b4', '#b7badd','#f1c7dd'];

// 本地圖片地址
var IMAGE_URIS = [
  require('./images/jessicajung.png'),
  require('./images/tiffany.png'),
  require('./images/seohyun.png'),
  require('./images/taeyeon.png'),
  require('./images/yoona.png'),
];

// 名稱
var NAMES = ['Jessica', 'Tiffany', 'Seohyun', 'Taeyeon', 'Yoona'];

/**
 * 點贊功能頁面
 * @param  {likes: 點贊數}
 * @return {點贊視圖} [點贊按鈕, 動態增加點贊數]
 */
var LikeCount = React.createClass({
  // 初始化狀態
  getInitialState: function() {
    return {
      likes: 0,
    };
  },

  // 點擊增加
  onClick: function() {
    this.setState({likes: this.state.likes + 1});
  },

  render: function() {
    var thumbsUp = '??'; // 圖標
    return (
      
        
          
            {thumbsUp}
          
        
        
          {this.state.likes + ' 喜歡'}
        
      
    );
  },
});

/**
* 按鈕: 添加點擊狀態(enabled)和文本(text)
* @param  {enabled:點擊狀態} {text:顯示文本} {onPress:點擊事件}
* @return {TouchableNativeFeedback} [觸摸反饋的視圖]
*/
var Button = React.createClass({
  _handlePress: function() {
    if (this.props.enabled && this.props.onPress) {
      this.props.onPress();
    }
  },

  render: function() {
    return (
      
        
          
            {this.props.text}
          
        
      
    );
  }
});

/**
* 滾動條, fractionalPosition滾動條長度, progressBarSize當前大小
* @param  {size:滾動條大小} {progress:過程}
* @return {View}   [裡外兩層視圖, 背景白框黑底, 顯示白框]
*/
var ProgressBar  = React.createClass({
  render: function() {
    var fractionalPosition = (this.props.progress.position + this.props.progress.offset);
    var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
    return (
      
        
      
    );
  }
});


var ViewPagerModule = React.createClass({

  /**
  * 初始化狀態
  * @return {狀態} [頁面]
  */
  getInitialState: function() {
    return {
      page: 0, // 當前位置
      progress: { // Progress位置
        position: 0,
        offset: 0,
      }
    };
  },

  // 頁面選擇
  onPageSelected: function(e) {
    this.setState({page: e.nativeEvent.position});
  },

  // 頁面滾動
  onPageScroll: function(e) {
    this.setState({progress: e.nativeEvent});
  },

  // 移動頁面
  move: function(delta) {
    var page = this.state.page + delta;
    this.go(page);
  },

  // 跳轉頁面
  go: function(page) {
    this.viewPage.setPage(page);
    this.setState({page});
  },

  render: function() {
    var pages = [];

    for (var i=0; i
          
          
            {NAMES[i%PAGES]}
          
          
        
      );
    }
    var {page} = this.state;

    return (
      
         {this.viewPage = viewPager;}}>
          {pages}
        

         0}
            onPress={() => this.go(0)}/> 0}
            onPress={() => this.move(-1)}/>
          
            頁 {page+1} / {PAGES}
          
          {/*進度條*/}
          
           this.move(1)}/> this.go(PAGES -1)}/>
        
      
    );
  },
});

module.exports = ViewPagerModule;

引入RN的原生模塊

var {
  View,
  Text,
  Image,
  TouchableNativeFeedback, // 觸碰響應
  TouchableOpacity, // 觸碰更換透明度的屬性
  ViewPagerAndroid, // Android的ViewPager
} = React;

TouchableNativeFeedback, 接觸時會受到原生的響應; TouchableWithoutFeedback, 接觸時無響應. TouchableOpacity, 接觸時會改變透明度. 在加入onclick方法時, 可以模擬按鈕視圖.

定義控件: LikeCount點贊, Button按鈕, ProgressBar滾動條.

3. 點贊(LikeCount)控件

likes存儲喜歡的數量. 點擊時, 更新數量狀態, 刷新頁面. 其中, 喜歡按鈕是觸碰控件, 在接觸時會改變透明度(Opacity).

/**
 * 點贊功能頁面
 * @param  {likes: 點贊數}
 * @return {點贊視圖} [點贊按鈕, 動態增加點贊數]
 */
var LikeCount = React.createClass({
  // 初始化狀態
  getInitialState: function() {
    return {
      likes: 0,
    };
  },

  // 點擊增加
  onClick: function() {
    this.setState({likes: this.state.likes + 1});
  },

  render: function() {
    var thumbsUp = '??'; // 圖標
    return (
      
        
          
            {thumbsUp}
          
        
        
          {this.state.likes + ' 喜歡'}
        
      
    );
  },
});

直接調用, 即可使用.

state的like屬性, 僅僅作用於當前頁面, 每次更新時刷新.
注意: 一定要謹慎使用全局state, 這樣會刷新整個頁面, 影響效率.

4. 按鈕(Button)控件

添加使用狀態, 是否可以點擊, 根據狀態修改視圖樣式和點擊回調.

/**
* 按鈕: 添加點擊狀態(enabled)和文本(text)
* @param  {enabled:點擊狀態} {text:顯示文本} {onPress:點擊事件}
* @return {TouchableNativeFeedback} [觸摸反饋的視圖]
*/
var Button = React.createClass({
  _handlePress: function() {
    if (this.props.enabled && this.props.onPress) {
      this.props.onPress();
    }
  },

  render: function() {
    return (
      
        
          
            {this.props.text}
          
        
      
    );
  }
});

在RN中, 並沒有提供Button視圖, 可以使用Touchable類的視圖, 設置點擊事件, 如TouchableNativeFeedback, 根據狀態, 修改按鈕的樣式和點擊. 注意: props表示屬性, 在使用視圖時提供.

使用Button, 設置text顯示, enabled狀態, onPress點擊事件.

           0}
            onPress={() => this.go(0)}/>

5. 滾動條(ProgressBar)控件

主要監聽ViewPager的滾動事件, 這和Android的滾動非常類似, fractionalPosition是偏移比例, progressBarSize是偏移量.

/**
* 滾動條, fractionalPosition滾動條長度, progressBarSize當前大小
* @param  {size:滾動條大小} {progress:過程}
* @return {View}   [裡外兩層視圖, 背景白框黑底, 顯示白框]
*/
var ProgressBar  = React.createClass({
  render: function() {
    var fractionalPosition = (this.props.progress.position + this.props.progress.offset);
    var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
    return (
      
        
      
    );
  }
});

控件需要設置ProgressBar的屬性progress(滾動位置)和size(大小).

使用控件, 屬性: size大小; progress進度狀態, 其中position是位置, offset是偏移.

      progress: { // Progress位置
        position: 0,
        offset: 0,
      }
      ...
          

注意: progress是主頁面屬性, 重置狀態時, 刷新全部頁面.

6. ViewPager頁面

根據頁面定制屬性, 根據頁面ID設置不同圖片和文字.

    for (var i=0; i
          
          
            {NAMES[i%PAGES]}
          
          
        
      );
    }

注意設置圖片資源時,
使用IMAGE_URIS =['xxx.png']和require(IMAGE_URIS[i%PAGES])會顯示模塊丟失.
在數組IMAGE_URIS使用require('./images/jessicajung.png')加載source就可以.
思考很久的問題…

ViewPager頁面

      
         {this.viewPage = viewPager;}}>
          {pages}
        

         0}
            onPress={() => this.go(0)}/> 0}
            onPress={() => this.move(-1)}/>
          
            頁 {page+1} / {PAGES}
          
          {/*進度條*/}
          
           this.move(1)}/> this.go(PAGES -1)}/>
        
      

使用方法, 監聽ViewPagerAndroid的事件, onPageScroll頁面滾動, onPageSelected頁面選擇, 按鈕關聯頁面. 核心在於go方法, 設置state的viewPage頁.

  // 跳轉頁面
  go: function(page) {
    this.viewPage.setPage(page);
    this.setState({page});
  },

7. Styles

引入styles, 使用獨立文件.

// Styles
var styles = require('./style');

樣式

'use strict';

var React = require('react-native');

var {
  StyleSheet,
} = React;

var styles = StyleSheet.create({
  buttons: {
    flexDirection: 'row',
    height: 40,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

  // 按鈕可點擊狀態
  button: {
    flex: 1,
    width: 0,
    margin: 2,
    borderColor: 'gray',
    borderWidth: 1,
    backgroundColor: 'gray',
  },

  // 按鈕非點擊裝
  buttonDisabled: {
    backgroundColor: 'black',
    opacity: 0.5,
  },

  buttonText: {
    fontSize: 12,
    color: 'white',
    textAlign: 'center',
  },

  // 文字顯示
  nameText: {
    fontSize: 16,
    margin: 4,
    color: 'white',
    textAlign: 'center',
  },

  container: {
    flex: 1,
    backgroundColor: 'white',
  },

  image: {
    flex: 1,
    width: 300,
    padding: 20,
  },

  likeButton: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    borderColor: '#333333',
    borderWidth: 1,
    borderRadius: 5,
    flex: 1,
    margin: 8,
    padding: 8,
  },

  likeContainer: {
    flexDirection: 'row',
  },

  likesText: {
    flex: 1,
    fontSize: 18,
    alignSelf: 'center',
  },

  progressBarContainer: {
    height: 10,
    margin: 5,
    borderColor: '#eeeeee',
    borderWidth: 2,
  },

  progressBar: {
    alignSelf: 'flex-start',
    flex: 1,
    backgroundColor: '#eeeeee',
  },

  viewPager: {
    flex: 1,
  },
});

module.exports = styles;

裡面包含各個控件的樣式, 主要使用了Flex+RN的Style.

動畫效果

OK, 通過實現簡單的ViewPagerAndroid學習了很多知識.