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,ViewPagerAndroid,} = 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',justifyContent: 'center'}}> <Text style={styles.textStyle}>Second page</Text> </View> <View style={{backgroundColor: '#d45670',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,TouchableWithoutFeedback,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',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);

未完待续。