React Native setNativeProps使用

有时候我们需要直接改动组件并触发局部的刷新,但不使用state或是propssetNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 ViewText 等 RN自带的组件 ,则不会触发组件的 componentWillReceivePropsshouldComponentUpdatecomponentWillUpdate 等组件生命周期中的方法。

使用例子

  class MyButton extends React.Component({
    setNativeProps(nativeProps) {
         this._root.setNativeProps({   //这里输入你要修改的组件style
            height:48,
            backgroundColor:'red'
         });
    },
    render() {
         return (
            <View ref={component => this._root = component} {...this.props} style={styles.button}>
             <Text>{this.props.label}</Text>
        </View>
         )
    },
  });

避免和render方法的冲突

如果要更新一个由render方法来维护的属性,则可能会碰到一些出人意料的bug。因为每一次组件重新渲染都可能引起属性变化,这样一来,之前通过setNativeProps所设定的值就被完全忽略和覆盖掉了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,107评论 2 35
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • 在React Native中使用组件来封装界面模块时,整个界面就是一个大的组件,开发过程就是不断优化和拆分界面组件...
    ITxiansheng阅读 949评论 1 2
  • 2010-08-22 21:04 阅读:447 文艺圈在外人眼中仿佛是一个大染缸,置身其中一定会失去本真的颜色!事...
    蝶恋谷谷主阅读 13,604评论 0 1
  • “近因效应”是指印象最深的记忆主要取决于离旁观者最近的言语和行为。在与人交往、求职、交流等过程中,善于利用“近因效...
    LiveFuture阅读 229评论 0 0