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，選擇Google調試，效果如下：

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);

未完待續。

react native組件學習(四)