react-navigation 监听横竖屏从新布局

1 监听布局改变

    组件内部拥有onLayout方法
    onLayout={this._onLayout}

    //如何动态布局呢
    //1 当然是监听横竖屏之后
    //2 使用this.setState 动态改变布局咯

    _onLayout(event){

        let {x,y,width,height} = event.nativeEvent.layout;
        console.log("X:"+x+"y:"+y+"width:"+width+"height:"+height);

        if(height>width){
            console.log("竖屏");
        }else{
            console.log("横屏");
        }
    }

2 改变状态机

<View style={styles.container}>
    <TouchableOpacity  onPress ={() => {this.setState({change:true})}}>
          {
            (this.state.change == true)
             ? (<Image source={'./images/img1.png'} /> )
             : (<Image  source={'./images/img2.png'} />)
           }
     </TouchableOpacity>
</View>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,532评论 25 708
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  • 麻木的自己越走越远,对于生活的恐惧像黑夜一般笼罩着我的世界,牵挂远方的家人,祈祷自己坚强,可是还是那么的脆弱,于是...
    小明_5e3e阅读 175评论 0 0
  • ——2018中国传统村落保护(海南)高峰论坛文章 在国家“文化兴邦”策略指引下,在海南“全域旅游”规划倡导下,海南...
    萧烟阅读 598评论 0 0
  • 1、下午和身在上海的老刘聊了106分钟的微信语音聊天。从彼此工作到最近的生活思想变化。老刘信了基督,谈到...
    陌白Carl阅读 204评论 0 0