Shulou(Shulou.com)06/03 Report--

What this article shares to you is the example analysis of the ScrollView drop-down refresh effect of react native. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

The refreshControl property of ScrollView is used for drop-down refresh and can only be used for vertical views, that is, horizontal cannot be true.

1. Create a custom CKRefresh.js refresh component

Import React, {Component} from 'react';import {View, Text, StyleSheet, ScrollView, RefreshControl, Dimensions} from' react-native';const screenW=Dimensions.get ('window'). Width;export default class CKRefresh extends Component {constructor () {super () This.state= {rowDataArr:Array.from (new Array (30)) .map ((value,index) = > ({title:' initialization data'+ index})), / / whether to display loading isRefreshing:false, loaded:0}} render () {const rowsArr=this.state.rowDataArr.map ((row) Index) = > () return (} > {rowsArr})} _ onRefresh () {/ / 1. Display indicator this.setState ({isRefreshing:true}); / / 2. Simulation loading data setTimeout (() = > {let newDataArr=Array.from (new Array (5)). Map ((value,index) = > ({title:' I am the pulled data'+ (this.state.loaded+index)})) .concat (this.state.rowDataArr) / / Update the state machine this.setState ({rowDataArr:newDataArr, isRefreshing:false, loaded:this.state.loaded+5});}, 2000);}} class Row extends Component {data: {}} Render () {return ({this.props.data.title})}} const styles=StyleSheet.create ({})

two。 Referencing in App.js

/ * Sample React Native App * https://github.com/facebook/react-native * * @ format * @ flow strict-local * / import React from 'react';import {SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar,} from' react-native';import {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';import CKRefresh from'. / components/CKRefresh' Const App: () = > React$Node = () = > {return ();}; const styles=StyleSheet.create ({mainViewStyle: {flex:1, backgroundColor:'#fff',}}); export default App

3. The result is as shown in the picture

The above is the whole content of this article, I hope it will be helpful to your study, and I also hope that you will support it.

The above is an example analysis of the ScrollView drop-down refresh effect of react native. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.