RN(React-Native)-通俗的说就是跨平台开发吧,一套代码可以在安卓和ios上运行,针对ios而言其本质是对ios原生控件的一次封装,然后通过js调用相关函数,视图等。
1.视图
移动端常用的视图RN中都有相关的组件(在RN中移动端开发的视图对应组件)对应。这里RN基础的东西不做相关赘述。大家有兴趣学习RN的可以在RN中文网上学习。里面相关的基础的东西叙述相当清楚,只要一步一步按照上面的来,问题不大。
2.这里重点说一下我遇到的棘手的问题,开发需要和H5进行通讯,网上查找了很多资料,感觉实用的比较少,下面说一下自己这边的开发。
原理简述:RN和h5中相互交互是通过两个方法:一个是onMessage(接收消息),一个是postMessage(发送消息),通过设置监听(分别是图1中的2和图2中的2)来进行通信。
首先,你需要有一个Html文件,这个是你交互所必须的对象
html代码截图:(1.发送数据到RN,RN中设置了监听就可以获取到数据,要调用获取的数据直接e.nativeEvent.data就可以拿到传过来的数据;2.接收RN传过来的数据,这个注意一点,经测试必须要同时写上发送方法好像才能进行通信,才能接收RN传过来的数据,测试不写就收不到,这里希望高手看到的话可以指点一二。3.Html 的标签语言,调用对应的方法,实现界面交互)
RN主要代码截图:(1.html的文件路径,这里我写的绝对路径;2.设置监听,获取html传过来的数据,这里eval对数据进行了处理,只能是字符串;3.获取事件对象,进行相应的需求处理)
初学RN,有不足的地方请指教。最后通信这一块推荐一片文章:H5与RN通信。这边文章介绍很详细,摩拜ing。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步