文章标题

    xiaoxiao2021-12-14  23

    1.React Native介绍 React Native (简称RN)是Facebook于2015年四月开源的跨平台移动应用开发框架,是Facebook早先开源的Web UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。 该框架使用Javascript,类似于HTML的JSX,以及CSS来开发移动应用UI,因此熟悉Web开发的人只需很少的学习成本就可以转入移动应用开发。 RN运行时包含一个原生的主线程和一个JS线程,JS线程执行JS代码,负责界面布局和业务逻辑处理,原生线程负责界面渲染和原生组件的执行。RN里面尽量使用原生组件,避免重复造轮子。这样的好处,一是可以利用现有的大量的原生组件,降低入门门槛;二是可以达到跟原生应用一样的性能;三是通过JS封装过后的组件,可以支持跨平台。 JS在RN里面的作用类似于Python这样的支持调用原生C库的脚本语言,都是起着“胶水”的作用。复杂计算和底层功能都通过调用原生接口来完成,流程控制和业务逻辑则在“胶水”语言里完成。这样既提高了开发效率,又兼顾了性能。

    2.RN生命周期: 实例化阶段: 在日常开发中,最为常用的就是实例化阶段,因为该阶段是组件的构建,展示阶段。 constructor(props){ super(props); this.state = { loopsRemaining: this.props.maxLoops, }; }   该函数用于对组件的一些状态进行初始化,该状态是随时变化的(也就是说该函数会被多次调用),比如ListView的datasource,rowData等等,同样的,可以通过this.state.XXX获取该属性值,同时可以对该值进行修改,通过this.setState修改 componentWillMount:    该函数类似于iOS中的VillWillAppear,在组件即将加载在视图上调用。 render:    该函数组件必有的,通过返回JSX或其他组件来构成DOM,换言之,就是组件的核心渲染过程。 componentDidMount:   在执行完render函数之后,该函数被执行,我们通常可以在该函数当中做一些复杂操作,如网络请求。 存在阶段: componentWillReceiveProps:   组件将要修改props或者state shouldComponentUpdate:   常用于优化 componentWillUpdate:   组件更新时调用 componentDidUpdate:   组件更新完毕时调用 销毁阶段: componentWillUnmount:   通常做一些清理内容 

    但是不要在componentWillMount里进行赋值,比如this.num = 10;在用this.num进行一些变化时会走componentWillMount这个方法,所以改变的时候老是又重新等于10,这是我之前遇到的一个问题。

    3.props和state的不同点以及相同点 相同点 1.不管是props还是state的改变,都会引发render的重新渲染。 2.都能由自身组件的相应初始化函数设定初始值。 不同点 1.初始值来源:state的初始值来自于自身的constructor函数;props来自于父组件或者自身static defaultProps = { autoPlay: false, maxLoops: 10, }; // 注意这里有分号(若key相同前者可覆盖后者)。 2.修改方式:state只能在自身组件中setState,不能由父组件修改;props只能由父组件修改,不能在自身组件修改。 3.对子组件:props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件;state代表的是一个组件内部自身的状态,只能在自身组件中存在。

    4.react和原生桥接 首先需要在需要桥接的原生view中实现一个宏方法: RCT_EXPORT_MODULE([js_name]) 这个宏会导出一个模块,即要实现桥接,必须用这个宏把模块暴露给React的Bridge(括号中为空表示导出当前所在模块) js中使用var ReactView = require(‘react-native’).NativeModules.ReactViewController; 即可获得该模块 当我们需要让js控制原生做一些事情的时候,需要用到RCT_EXPORT_METHOD(method) 当我们需要跳转到原生view时,就可以用这个方法,不过这里有个大坑,就是当js触发这个方法时,会将所有在这个原生view的属性值都改变,所以在这个方法里,所有的属性值都要重新获取,故navigationController就不能直接用,需要先手动获取当前viewController,再跳转 5.关于如何从原生向RN发送事件 发送事件可以随时向RN传值,比如从其他原生界面返回到RN原生视图时需要向RN传新的值,需要用到RCTBridge里的eventDispatcher,但是需要注意的是发送事件需要用到一个特殊的单例(ios平台) 在单例里的代码SendManager.m + (id)allocWithZone:(NSZone *) zone { static SendManager *sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ sharedInstance = [super allocWithZone:zone]; }); return sharedInstance; } - (void)sendMess:(NSString *)skuNum [self.bridge.eventDispatcher sendAppEventWithName:@”Event” body:@{@”num”: skuNum}]; } 然后需要发送时 [[SendManager allocWithZone:nil] sendMess:skuNum]; 这是0.25.1版本我的写法,现在新的RN版本好像会有所不同,还在研究

    转载请注明原文地址: https://ju.6miu.com/read-963220.html

    最新回复(0)