native react 列表刷新_react native 禁止刷新 - CSDN
  • 按照React文档上说的,组件想要对自身进行刷新,可以通过调用setState()或者forceUpdate()来实现,这是让组件刷新的其中一种办法,也就是我说的内部驱动。而另一中则是由外部驱动,也就是让父组件驱动子组件进行重新...

    组件(Component)的刷新机制

    一个组件在加载完毕后,如果既没有外部驱动,也没有内部驱动,是不会进行重新渲染的。按照React文档上说的,组件想要对自身进行刷新,可以通过调用setState()或者forceUpdate()来实现,这是让组件刷新的其中一种办法,也就是我说的内部驱动。而另一种则是由外部驱动,也就是让父组件驱动子组件进行重新渲染,那么下面就是阐述父组件如何让子组件发生重新渲染。

    先说大体思路:父组件通过给子组件传递数据(属性)告知子组件有可能需要重新渲染,子组件自己根据传来的数据(在componentWillReceiveProps方法中)决定是否有必要进行重新渲染。

    根据React文档,父组件可以通过属性(props)把数据传递给子组件,但需要注意的是这个传递动作只发生的render的过程中,在组件已经渲染完毕之后,传递就会停止。假设父组件内部定义了变量A,并赋给了子组件的某个属性,当这个变量A 的值发生改变,并不足以让子组件刷新。只要变量A的变化不足以引发父组件调用自身的render方法进行重新渲染,这个变量A的值就不会主动传递给子组件。这段话的目的在于明确组件的数据传递需要由渲染来驱动,而不是由数据的变化来驱动的。因此父组件要传递数据给子组件,第一步是要触发父组件对自身的重新渲染。

    按照React文档上说的,通过在父组件中调用setState()或者forceUpdate()都可以引起组件对自身的重新渲染,这就完成了上述的第一步。那么成功将数据通过属性传递给了子组件后,也还是不一定能引发子组件的更新,因为组件有权决定当接收到外部传来的属性的时候要怎么处理,而具体实现就定义在组件的componentWillReceiveProps方法里,在组件首次渲染完毕之后,这个方法会在组件每次接收到外部传来的属性时被调用(组件首次加载时除外)。通常,使用RN定义好的很多组件(比如Text、Image等)时,会发现当给它们赋予新的属性,它们相应的UI特征就会改变,那是因为这些组件都已经在componentWillReceiveProps方法中实现了在接收到外部传来的属性的时候就进行重新渲染。因此如果发现有些组件未能按预想般进行刷新,可以查看该组件的源码中componentWillReceiveProps方法的实现,看看传给该控件的属性是否满足了它的刷新条件。另外,如果要自定义一些控件,而且希望控件在第一次加载完毕后还能受属性的影响而进行刷新,就要自己去实现componentWillReceiveProps方法,根据接收到的属性,主动调用setState方法进行自我刷新。

    每天进步一点点,希望今天进步的一点能比昨天的一点要多一点。

    展开全文
  • React Native中可以通过setState实现刷新组件,setState会触发render()方法重新渲染,页面布局复杂的时候会遇到性能问题,React Native提供局部刷新组件的方法setNativeProps,使用如下 <Viewref={(c) => ...

    在React Native中可以通过setState实现刷新组件,setState会触发render()方法重新渲染,页面布局复杂的时候会遇到性能问题,React Native提供局部刷新组件的方法setNativeProps,使用如下

    <View
        ref={(c) => this.refView = c}>

    </View>

    在需要触发局部更新组件的事件中调用方法,通过组件引用调用组件的setNativeProps方法实现组件的局部刷新,组件自身的所用的属性都可以设置,这里示例只是刷新组件的backgroundColor,想要刷新组件的其他属性可自行添加和设置。

    onPressEvent() {
        this.refView.setNativeProps({
            style: {backgroundColor: '#f1f1f1'}
        });
    }

    展开全文
  • 关于React Native List的下拉刷新,虽然官方出了一个控件RefreshControl,但可定制性太差,基本上样式固定了。为了满足项目需求,我在GitHub上搜到了这个组件,使用起来非常不错。 同时支持android和ios,并且拥有...

            关于React Native List的下拉刷新,虽然官方出了一个控件RefreshControl,但可定制性太差,基本上样式固定了。为了满足项目需求,我在GitHub上搜到了这个组件,使用起来非常不错。

            同时支持android和ios,并且拥有相同的Api,可以自定义下拉刷新样式;它里面已经实现了View,Scrollview,Listview和Flatlist的下拉刷新,可以支持绝大多数的React Native中的组件实现下拉刷新功能。

    安装

            yarn add react-native-rk-pull-to-refresh

    如果link失败就需要手动link

            react-native link react-native-rk-pull-to-refresh

    使用提醒

            它内部包含了PullView、PullScrollView,、PullListView和PullFlatList,如果你想使用PullFlatList的话,那么你要保持你的React Native版本在0.43及以上。并且你要添加如下的代码到FlatList(node_modules/react-native/Libraries/Lists/FlatList.js)中:

    ...
    getScrollMetrics = () => {
        return this._listRef.getScrollMetrics()
    }

    ...

            同时在VirtualizedList(node_modules/react-native/Libraries/Lists/VirtualizedList.js)中添加如下代码:

    ...
     getScrollMetrics = () => {
        return this._scrollMetrics
     }

     ...

    属性

    Porp Type Optional Default Description
    refreshable bool yes true 是否需要下拉刷新功能
    isContentScroll bool yes false 在下拉的时候内容时候要一起跟着滚动
    onPullRelease func yes   刷新的回调
    topIndicatorRender func yes   下拉刷新头部的样式,当它为空的时候就使用默认的
    topIndicatorHeight number yes   下拉刷新头部的高度,当topIndicatorRender不为空的时候要设置正确的topIndicatorHeight
    onPullStateChangeHeight func yes   下拉时候的回调,主要是刷新的状态的下拉的距离
    onPushing func yes   下拉时候的回调,告诉外界此时是否在下拉刷新

            startRefresh():手动调用下拉刷新功能 

            finishRefresh():结束下拉刷新

    使用样例

    PullListView默认样式

    import React, {PureComponent} from 'react';
    import {ListView, View, Text, Dimensions} from 'react-native';
    import {PullListView} from 'react-native-rk-pull-to-refresh'
    const width = Dimensions.get('window').width
    export default class PullListViewDemo extends PureComponent {
        constructor(props) {
            super(props);
            this.dataSource =
                new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(this.getDataSource())
        }

        getDataSource = () => {
            let array = new Array();
            for (let i = 0; i < 50; i++) {
                array.push(`ListViewItem:${i + 1}`);
            }
            return array;
        }

        render() {
            return (
                <PullListView
                    ref={(c) => this.pull = c}
                    isContentScroll={true}
                    style={{flex: 1, width: width}}
                    onPushing={this.props.onPushing}
                    onPullRelease={this._onPullRelease}
                    dataSource={this.dataSource}
                    renderRow={this._renderRow}/>
            )
        }

        _onPullRelease = () => {
            setTimeout(() => {
                this.pull && this.pull.finishRefresh()
            }, 2000)
        }

        _renderRow = (rowData) => {
            return (
                <View style={{width: width, height: 50, justifyContent: 'center', alignItems: 'center'}}>
                    <Text>{rowData}</Text>
                </View>);
        }

        componentDidMount() {
            this.pull && this.pull.startRefresh()
        }

    }

     

    PullView自定义样式

    import React, {PureComponent} from 'react';

    import {View, Text, Dimensions, StyleSheet, ActivityIndicator} from 'react-native';

    import {PullView} from 'react-native-rk-pull-to-refresh'

    const width = Dimensions.get('window').width
    const topIndicatorHeight = 50

    export default class PullViewDemo extends PureComponent {
        render() {
            return (
                <PullView
                    ref={(c) => this.pull = c}
                    style={{flex: 1, width: width}}
                    topIndicatorRender={this.topIndicatorRender}
                    topIndicatorHeight={topIndicatorHeight}
                    onPullStateChangeHeight={this.onPullStateChangeHeight}
                    onPushing={this.props.onPushing}
                    onPullRelease={this._onPullRelease}>
                    <Text style={{flex: 1, width: width, paddingTop: 200, textAlign: 'center'}}>这是内容</Text>
                </PullView>
            )
        }

        onPullStateChangeHeight = (pullState, moveHeight) => {
            if (pullState == 'pulling') {
                this.txtPulling && this.txtPulling.setNativeProps({style: styles.show});
                this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
            } else if (pullState == 'pullok') {
                this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
                this.txtPullok && this.txtPullok.setNativeProps({style: styles.show});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
            } else if (pullState == 'pullrelease') {
                this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
                this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.show});
            }
        }

        topIndicatorRender = () => {
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: topIndicatorHeight}}>
                    <ActivityIndicator size="small" color="gray" style={{marginRight: 5}}/>
                    <Text ref={(c) => this.txtPulling = c} style={styles.hide}>pulling...</Text>
                    <Text ref={(c) => this.txtPullok = c} style={styles.hide}>pullok...</Text>
                    <Text ref={(c) => this.txtPullrelease = c} style={styles.hide}>pullrelease...</Text>
                </View>
            );
        }

        _onPullRelease = () => {
            setTimeout(() => {
                this.pull && this.pull.finishRefresh()
            }, 2000)
        }

        componentDidMount() {
            this.pull && this.pull.startRefresh()
        }
    }

    const styles = StyleSheet.create({
        hide: {
            position: 'absolute',
            left: 10000,
            backgroundColor: 'transparent'
        },
        show: {
            position: 'relative',
            left: 0,
            backgroundColor: 'transparent'
        }

    });

     

    参考链接:https://github.com/hzl123456/react-native-rk-pull-to-refresh

     

     

     

    展开全文
  • react native刷新页面

    2019-07-20 22:35:29
    react native刷新页面就是改变页面的数据源,如果页面的数据源是state或者是store那么当数据源改变了.页面就会自动刷新的.所以刷新页面的两种方式 1:用redux来做数据源,无论在哪个页面只要改变了某一个页面的...

    在react native中刷新页面就是改变页面的数据源,如果页面的数据源是state或者是store那么当数据源改变了.页面就会自动刷新的.所以刷新页面的两种方式

    1:用redux来做数据源,无论在哪个页面只要改变了某一个页面的数据源,那么那个页面都会刷新

    2:用回调的方法来刷新前一个页面,在用react-navigation的时候打开页面的时候是可以传参数的,参数里可以是一个变量也可以是一个回调方法,下面举例说明:

    this.props.navigation.navigate("CoreScan", {
    curQuyuId: this.state.curQuyuId,
    quyuName: this.state.quyuName,
    timeinterval: timeinterval,
    refresh: function () {
    self.orderstatus();
    }
    });

    在下一个页面的返回按钮:
    <TouchableOpacity style={[y.udr, y.ujc, y.uac, y.h(190), y.w(100)]} onPress={() => {
    this.props.navigation.state.params.refresh();
    this.props.navigation.goBack();
    }}>
    <View style={[y.bl(4), y.bb(4), {
    borderColor: "#fff",
    transform: [{rotate: '45deg'}]
    }, y.w(20), y.h(20)]}></View>
    <Text style={[y.mr(5), y.fSize(29), y.color("#fff")]}>返回</Text>
    </TouchableOpacity>

    转载于:https://www.cnblogs.com/dragonh/p/7566960.html

    展开全文
  • react-native之每隔一秒刷新页面

    效果图:


    index.android.js:

    'use strict';
    import React,{Component} from 'react';
    import {AppRegistry,Text,View} from 'react-native';
    class Blink extends Component{
        // 构造
          constructor(props) {
            super(props);
            // 初始状态
            this.state = {showText:true};
              setInterval(()=>{
                  this.setState({showText:!this.state.showText})//每个一秒,showText的值取反。原来的值是这样子获取this.state.showText
              },1000);
          }
        render(){
            let display = this.state.showText ? this.props.text : ' ';//三目运算,如果是true,显示四个组件的值,否则,显示空白
            return(
               <Text>{display}</Text>
            )
        }
    }
    class BlinkApp extends Component{
        render(){
            return(
                <View>
                    <Blink text='I love to blink' />
                    <Blink text='Yes blinking is so great' />
                    <Blink text='Why did they ever take this out of HTML' />
                    <Blink text='Look at me look at me look at me' />
                </View>
            )
        }
    }
    //MyFirstProject 必须初始化的项目名字
    AppRegistry.registerComponent('MyFirstProject',() => BlinkApp);
    
    ps:实际开发中,我们一般不会在定时器函数(setInterval、setTimeout等)中来操作state。

    展开全文
  • 1、如果是使用goback返回刷新,也就是返回上一级页面后刷新页面,这时可以使用回调方法。 例如:从A跳到B再回到A, A页面定义回调方法, this.props.navigation.navigate("B", { id: this.state.id, ...
  • 页面a向页面b跳转,页面b在转会页面a,页面a需要刷新时。需要页面a向页面b传递一个回调函数,通过这个回调函数能够对页面a进行转化 A页面 onPress={() => { this.props.navigation.navigate('页面b', { // ...
  • ReactNative刷新模拟器

    2016-10-08 13:51:45
    ReactNative刷新模拟器 iOS模拟器是 com+R 安卓是 双 R
  • react-native 自定义封装刷新组件几个月没写博客了,最近一直在写reactreact-native,前几天刚发了一版基于react-native混合开发的App,这几天赶快总结下。写过java的同学,再去学习reactreact-native就会比较...
  •  我这边本来是用FastList自带的刷新机制来进行刷新的。但是由于我页面里面的FastList组件太多,刷新方面变得混乱起来。后来又看RN的文档才发现,原来RefreshControl这个刷新组件也可以在ScrollView里面使用。相当于...
  • 该方法控制页面是否需要刷新,true表示刷新false表示不刷新。 解决办法就是:如页面包含多个控件,把控件都封装起来,在封装的控件的shouldComponentUpdate里面判断props是否和之前一致,一致就不刷新。...
  • 组件化是react-native的最大优点之一,因为组件化我们可以做到局部刷新,提高性能。 如图所示 父组件包含连个子组件 添加可以动态增加子组件 log输出: add关键代码: _onPress() { if(show){/*显示删除时 不...
  • react-native-flatlist-pull是一个基于FlatList,支持Android和iOS的下拉刷新列表组件。是在另一个项目react-native-pull的基础上进行修改而成。主要将原项目中已经过时的ListView替换成较新的FlatList,同时去掉了原...
  • 问题:当我们在当前界面更改数据后,点击方法:this.props.navigation.goBack()后退,如何让前一个或者前一个的前一个有关联的界面刷新数据,保持数据的实时同步显示? 注: 在这里我用的导航器为React Navigation...
  • 1、如果是使用goback返回刷新,也就是返回上一级页面后刷新页面,这时可以使用回调方法。 例如:从A跳到B再回到A, A页面定义回调方法, this.props.navigation.navigate("B", {  id: this.state.id, ...
  • 为什么这么说呢,因为随着业务的爆发式增长,传统的原生开发模式有点显得跟不上节奏了,这也促使各个公司希望寻找到一个更加高效的开发方案,当下可以被选择的方案中, React Native 及Weex 都是不错的技术方案...
  • React Native 版本执行0.57的规则 第一版优惠券中心,是删除已领取的状态,后来又改为全部展示,分为已领取、去使用、已使用、已过期几种状态。 import React, { Component } from 'react'; import { StyleSheet, ...
  • react-native 上下拉加载的控件效果都不好,找了半天没找到,正打算自已封装的时候,无意中找到了一个比较好的控件,大家看一下: react-native-refresh-list-view 这个是基于flatlist封装的,效果还不错,大家...
  • ReactNative 做移动端开发时,用TabNavigator实现标签时,在两个标签之间切换时,无法实现页面的刷新。正如网上所提的问题: “如果2个tabbar 里面的 list数据是对应的,比如 一个是 货物list, 一个是 上架货物的...
  • react native 列表展示的解决方案explain一开始我坐下拉刷新列表的展示的时候选用的为gift list类的组件,确实美观,功能多,当我发现如何结合redux,就会不方便,且没有很好的例子,最后的解决方案,采用listView...
1 2 3 4 5 ... 20
收藏数 7,425
精华内容 2,970
关键字:

native react 列表刷新