ReactNative学习笔记(五)踩坑总结

2021年09月15日 阅读数:1
这篇文章主要向大家介绍ReactNative学习笔记(五)踩坑总结,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

已经发现的bug或者问题

  • Android不支持shadow属性;
  • Animated.Image的borderRadius不生效;
  • setNativeProps没法修改图片的source;
  • 没有直接设置组件显示与隐藏的属性,只能变相实现;
  • require加载图片不能是变量或者拼接的字符串;
  • require加载json也是同样,也不支持动态加载;
  • 图片拉伸时默认效果是cover,而不像html中的stretch;
  • 开启远程调试时动画很是卡,甚至能够说卡到看不到动画效果;

debug模式和release模式的区别

JS引擎的不一样

原文见这里javascript

  • 在iOS、Android的模拟器或是真机上,React Native使用的是JavaScriptCore,也就是Safari所使用的JavaScript引擎。可是在iOS上JavaScriptCore并无使用即时编译技术(JIT),由于在iOS中应用无权拥有可写可执行的内存页(于是没法动态生成代码)。
  • 在使用Chrome调试时,全部的JavaScript代码都运行在Chrome中,而且经过WebSocket与原生代码通讯。此时的运行环境是V8引擎。

JSON解析时的编码问题

有以下简单的JSON文件,UTF-8编码,内容没有中文,而且header设置了application/json;charset=UTF-8html

{
	"update": true,
	"url": "http://192.168.191.1/update/bundle.zip"
}

加载代码以下:java

fetch('http://192.168.191.1/update/check_update.json')
.then((response) => response.json())
.then((json) => alert(json))
.catch((error) => alert('错误:'+error));

debug模式下没有任何问题,可是打成release包时却报错:react

W416xH67

代码改为这样也同样:android

fetch('http://192.168.191.1/update/check_update.json')
.then((response) => response.text())
.then((text) => JSON.parse(text))
.catch((error) => alert('错误:'+error));

最后把文件改为ANSI编码就没问题了,真是醉了!json

热更新问题

更新index.android.bundle必须打成release包并重启才能看到效果。app