react-native 笔记-下拉刷新-scrollView

叁歲伎倆 2023-06-29 05:38 42阅读 0赞

## 笔记-下拉刷新 ##

import React, { Component } from 'react';
    import {
      View,
      Text,
      StyleSheet,
      ScrollView,
      Dimensions,
      RefreshControl,
      StatusBar,
      SafeAreaView,
    } from 'react-native'
    const width = Dimensions.get('window').width;
    
    
    class DemoRefresh extends Component {
      constructor(){
        super();
        this.state = {
          rowDataArr: Array.from( new Array(30)).map( (value, index) => ({
            title: '初始化数据' + index
          })),
          isRefreshing: false,
          loaded: 0,
        }
      }
    
      onRefreshHandle() {
        this.setState({
          isRefreshing: true
        })
        setTimeout(() => {
          let newDataArr = Array.from( new Array(5)).map( (value, index) => ({
            title: '我是下拉数据' + (index + this.state.loaded)
          })).concat( this.state.rowDataArr );
          this.setState({
            rowDataArr: newDataArr,
            isRefreshing: false,
            loaded: this.state.loaded + 5
          })
        }, 2000);
      }
    
      render() {
        const rowArr = this.state.rowDataArr.map((row, index) => (<Row data={row} key={index}></Row>))
        return (
          <>
            <StatusBar barStyle="dark-content"></StatusBar>
            <SafeAreaView>
            
              <ScrollView
                refreshControl = {
                  <RefreshControl 
                    refreshing={ this.state.isRefreshing }
                    onRefresh = {() => this.onRefreshHandle()}
                  />
                }
              >
                {rowArr}
              </ScrollView>
            </SafeAreaView>
          </>
        )
      }
    }
    
    const styles = StyleSheet.create({
    
    })
    
    
    class Row extends Component {
      render() {
        return(
          <View style={
       {
            width: width,
            height: 40,
            borderBottomColor: 'red',
            borderBottomWidth: 1,
            justifyContent: 'center'
          }}>
            <Text>{this.props.data.title}</Text>
          </View>
        )
      }
    }
    
    export default DemoRefresh;

## Ios ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]

## android ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 1]  
(完)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200110151056577.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200110151137371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA==,size_16,color_FFFFFF,t_70