react native組件學習(四)

jopen 9年前發布 | 17K 次閱讀移動Web開發框架移動開發 React Native

PullToRefreshViewAndroid學習

PullToRefreshViewAndroid是一個視圖，可以放置單個可滾動子視圖，當子視圖的豎直方向偏移（scrollY）為0時，將其下拉可以觸發一個onRefresh事件。

在學習PullToRefreshViewAndroid組件之前，如果沒有一定的基礎，建議先閱讀前面的文章，因為，這里我在之前學習ScrollView的基礎上，添加PullToRefreshViewAndroid功能。當前的代碼如下：

'use strict';

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

var {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  RefreshControl,
  View,
} = React;


var Row = React.createClass({

  render: function() {
    return (
      <TouchableOpacity>
        <View style={styles.row}>
            <Text style={styles.text}>
            {this.props.data.text}
            </Text>    
          </View>
      </TouchableOpacity>
    );
  },
});



var secondProject = React.createClass({
 getInitialState() {
    return {
      isRefreshing: false,
      loaded: 0,
      rowData: Array.from(new Array(20)).map(
        (val, i) => ({text: 'Initial row' + i})),
    };
  },

  render: function() {
    const rows = this.state.rowData.map((row,ii) => { console.log("iiii is :"+ii+" the row is :"+row); return <Row key={ii} data={row}/>; }); return ( <ScrollView style={styles.scrollview} > {rows} </ScrollView> ); }, }); var styles = StyleSheet.create({ text: { alignSelf: 'center', color: '#f00', }, row: { borderColor: 'grey', //邊框顏色 borderWidth: 1, //邊框寬度 padding: 20, //內邊距 backgroundColor: '#3a5795', //背景色 margin: 5, //外邊距 }, scrollview: { flex: 1, }, }); AppRegistry.registerComponent('secondProject', () => secondProject);

先看下效果：
這里寫圖片描述

引入PullToRefreshViewAndroid模塊

var { PullToRefreshViewAndroid, } = React;

使用PullToRefreshViewAndroid

<PullToRefreshViewAndroid
        style={styles.layout}
        refreshing={this.state.isRefreshing}
        onRefresh={this._onRefresh}
        colors={['#f87908', '#f09873', '#0987d5']}
        progressBackgroundColor={'#786548'}
        >
       <ScrollView
        style={styles.scrollview}
        >
        {rows}
      </ScrollView>
 </PullToRefreshViewAndroid>

isRefreshing 初始值是false，表示不刷新
onRefresh 在該方法中回調_onRefresh，如下：

定義刷新方法

_onRefresh() {
    this.setState({isRefreshing: true}); //設置當前isRefreshing為true，否則不會顯示刷新指示圖標
    setTimeout(() => { //在5秒后執行下面的方法 const rowData = Array.from(new Array(10)) //構建一個長度為10的數組，通過concat添加到rowData末尾 .map((val, i) => {return { text: 'Loaded row' +i, }}) .concat(this.state.rowData); this.setState({ isRefreshing: false, //將isRefreshing重置為false，這樣會隱藏刷新指示圖標 rowData: rowData, //重新設置當前需要顯示的數組 }); }, 5000); },

ViewPagerAndroid學習

ViewPagerAndroid是一個允許在子視圖之間左右翻頁的容器，類似于android中的ViewPager。所有的子視圖都必須是純View，而不能是自定義的復合容器

ViewPagerAndroid屬性

initialPage number 

初始選中的頁的下標。你可以用setPage 函數來翻頁，并且用onPageSelected來監聽頁的變化。

keyboardDismissMode enum('none', "on-drag") 

決定在滑動的時候是否要讓軟鍵盤消失。

none （默認值），拖拽不會讓鍵盤消失。

on-drag， 當拖拽開始的時候會讓鍵盤消失。

onPageScroll function 

當在頁間切換時（不論是由于動畫還是由于用戶在頁間滑動/拖拽）執行。

回調參數中的event.nativeEvent對象會包含如下數據：

position 從左數起第一個當前可見的頁面的下標。

offset 一個在[0,1)（大于等于0，小于1）之間的范圍，代表當前頁面切換的狀態。值x表示現在"position"所表示的頁有(1 - x)的部分可見，而下一頁有x的部分可見。

onPageSelected function 

這個回調會在頁面切換完成后（當用戶在頁面間滑動）調用。

回調參數中的event.nativeEvent對象會包含如下的字段：

position 當前被選中的頁面下標

ViewPagerAndroid簡單demo

下面我這里寫了一個很簡單的ViewPagerAndroid的demo，作為快速學習的一個栗子，效果如下：
這里寫圖片描述

引入需要使用的模塊

var { AppRegistry, StyleSheet, Text, ViewPagerAndroid, View, } = React;

使用ViewPagerAndroid組件

render: function() { return ( <ViewPagerAndroid  style={styles.viewPager} initialPage={0}> <View style={{backgroundColor: '#F09876',alignItems: 'center', justifyContent: 'center'}}> <Text style={styles.textStyle}>First page</Text> </View> <View style={{backgroundColor: '#789654',alignItems: 'center', justifyContent: 'center'}}> <Text style={styles.textStyle}>Second page</Text> </View> <View style={{backgroundColor: '#d45670',alignItems: 'center', justifyContent: 'center'}}> <Text style={styles.textStyle}>Third page</Text> </View> </ViewPagerAndroid> );

initialPage ，用來指定需要出示顯示的頁數

為ViewPagerAndroid添加監聽事件

 onPageScroll={(e)=>{
        console.log("the current position is:"+e.nativeEvent.position +"the offset is :"+e.nativeEvent.offset);
  }}
 onPageSelected={(e)=>{
        console.error("the selected position is:"+e.nativeEvent.position);
  }}

此時，點擊menu，選擇谷歌調試，效果如下：
這里寫圖片描述

ViewPagerAndroid進階

下面，我們使用ViewPagerAndroid實現一個稍微復雜一點的頁面滑動，先看效果：
這里寫圖片描述

完整代碼如下：

'use strict';

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

var {
  Image,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  TouchableOpacity,
  View,
  ViewPagerAndroid,
  AppRegistry,
} = React;

var PAGES = 5;
var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];

var Button = React.createClass({
  _handlePress: function() {
    if (this.props.enabled && this.props.onPress) {
      this.props.onPress();
    }
  },
  render: function() {
    return (
      <TouchableWithoutFeedback onPress={this._handlePress}>
        <View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}>
          <Text style={styles.buttonText}>{this.props.text}</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }
});


var secondProject = React.createClass({

  getInitialState: function() {
    return {
      page: 0,
      animationsAreEnabled: true,
      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) {
    if (this.state.animationsAreEnabled) { //當前是否使用動畫切換效果
      this.viewPager.setPage(page); //用setPage 函數來翻頁
    } else {
      this.viewPager.setPageWithoutAnimation(page);
    }

    this.setState({page});
  },

  render: function() {
    //構建數據
    var pages = [];
    for (var i = 0; i < PAGES; i++) {
      var pageStyle = {
        backgroundColor: BGCOLOR[i % BGCOLOR.length],
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
      };
      pages.push(
        <View key={i} style={pageStyle} collapsable={false}>
          <Text>{"this is item"+i}</Text>
       </View>
      );
    }
    var { page, animationsAreEnabled } = this.state;
    return (
      <View style={styles.container}>
        <ViewPagerAndroid
          style={styles.viewPager}
          initialPage={0}
          onPageScroll={this.onPageScroll}
          onPageSelected={this.onPageSelected}
          ref={viewPager => { this.viewPager = viewPager; }}>
          {pages}
        </ViewPagerAndroid>

        <View style={styles.buttons}>
          <Button text="第一個" enabled={page > 0} onPress={() => this.go(0)}/>
          <Button text="上一個" enabled={page > 0} onPress={() => this.move(-1)}/>
          <Button text="下一個" enabled={page < PAGES - 1} onPress={() => this.move(1)}/>
          <Button text="最后一個" enabled={page < PAGES - 1} onPress={() => this.go(PAGES - 1)}/>    
        </View>
      </View>
    );
  },
});

var styles = StyleSheet.create({
  buttons: {
    flexDirection: 'row',
    height: 30,
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  button: {
    flex: 1,
    width: 0,
    margin: 5,
    borderColor: 'gray',
    borderWidth: 1,
    backgroundColor: 'gray',
  },
  buttonDisabled: {
    backgroundColor: 'black',
    opacity: 0.5,
  },
  buttonText: {
    color: 'white',
  },
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  viewPager: {
    flex: 1,
  },
});

AppRegistry.registerComponent('secondProject', () => secondProject);

未完待續。

來自： http://blog.csdn.net/mockingbirds/article/details/50533449

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1453096965261.html

移動Web開發框架移動開發 React Native