React Native Module Learning (iv)

Pulltorefreshviewandroid Learning

Pulltorefreshviewandroid is a view that can place a single scrollable child view that, when the sub-view is shifted vertically (scrolly) to 0 o'clock, the drop-down can trigger a Onrefresh event.

Before learning pulltorefreshviewandroid components, if there is not a certain basis, it is recommended to read the previous article, because, here I learn scrollview before the foundation, add pulltorefreshviewandroid function. The current code is as follows:

‘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’, // border color
    borderWidth: 1, // Border width
    padding: 20, // Padding
    backgroundColor: ‘# 3a5795’, // background color
    margin: 5, // Margin
  },
  scrollview: {
    flex: 1,
  },
});

AppRegistry.registerComponent (‘secondProject’, () => secondProject);
First look at the effect:
Introduce PullToRefreshViewAndroid module
var {
  PullToRefreshViewAndroid,
} = React;
Use 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 The initial value is false, which means no refresh
onRefresh callback _onRefresh in this method, as follows:

Define refresh method
_onRefresh () {
    this.setState ({isRefreshing: true}); // Set the current isRefreshing to true, otherwise the refresh indicator icon will not be displayed
    setTimeout (() => {// Execute the following method after 5 seconds
      const rowData = Array.from (new Array (10)) // Build an array of length 10 and add it to the end of rowData through concat
      .map ((val, i) => {return {
        text: ‘Loaded row’ + i,
      }})
      .concat (this.state.rowData);

      this.setState ({
        isRefreshing: false, // Reset isRefreshing to false, this will hide the refresh indicator icon
        rowData: rowData, // Reset the current array to be displayed
      });
    }, 5000);
  },
ViewPagerAndroid learning
ViewPagerAndroid is a container that allows pages to be flipped between subviews, similar to ViewPager in Android. All subviews must be pure Views, not custom composite containers

ViewPagerAndroid properties
initialPage number

The subscript of the initially selected page. You can use the setPage function to turn pages, and use onPageSelected to monitor page changes.

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

Decide whether to make the soft keyboard disappear when sliding.

none (default), dragging will not make the keyboard disappear.

on-drag, when the drag starts, the keyboard disappears.

onPageScroll function

Executed when switching between pages (whether due to animation or due to user sliding / dragging between pages).

The event.nativeEvent object in the callback parameters will contain the following data:

position The subscript of the first currently visible page from the left.

offset A range between [0,1) (greater than or equal to 0, less than 1), representing the current page switching status. The value x means that the page indicated by "position" now has the (1-x) part visible, while the next page has the x part visible.

onPageSelected function

This callback will be called after the page switch is completed (when the user slides between pages).

The event.nativeEvent object in the callback parameters will contain the following fields:

position The index of the currently selected page
ViewPagerAndroid simple demo
Below I wrote a very simple ViewPagerAndroid demo, as a chestnut for quick learning, the effect is as follows:
Introduce the modules you need to use
var {
  AppRegistry,
  StyleSheet,
  Text,
  ViewPagerAndroid,
  View,
} = React;
Use ViewPagerAndroid component
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, used to specify the number of pages that need to be displayed

Add listen event for 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);
  }}
At this point, click menu and select Google debugging, the effect is as follows:
ViewPagerAndroid Advanced
Below, we use ViewPagerAndroid to achieve a slightly more complex page sliding, first look at the effect:
The complete code is as follows:

‘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; // Recalculate the number of jumped pages
    this.go (page);
  },

  go: function (page) {
    if (this.state.animationsAreEnabled) {// Whether the animation switching effect is currently used
      this.viewPager.setPage (page); // Use the setPage function to turn pages
    } else {
      this.viewPager.setPageWithoutAnimation (page);
    }

    this.setState ({page});
  },

  render: function () {
    // Build data
    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 = "first" enabled = {page> 0} onPress = {() => this.go (0)} />
          <Button text = "Previous" enabled = {page> 0} onPress = {() => this.move (-1)} />
          <Button text = "Next" enabled = {page <PAGES-1} onPress = {() => this.move (1)} />
          <Button text = "last one" 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);
To be continued.

React native component learning (4)