本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导,希望能对从事React Native开发的你有所帮助:
<Image>
支持更新,不在支持包裹内容;React Native 0.50版本中<Image>
组件迎来了比较大的一个特性的改变,即在React Native 0.50及以上版本中<Image>
不在支持包裹内容。
<Image style=
resizeMode="center"
source=>
<Text>小黄人</Text>
</Image>
以上代码在0.50之前是可以正常运行的,在0.50上运行会报:
Unhandled JS Exception: Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.
错误。
要改为:
<Image style=
resizeMode="center"
source=/>
<Text>小黄人</Text>
ReactShadowNode
由类被抽象成了接口,代替他的是ReactShadowNodeImpl,这是来自底层的变更,对上层API无影响,大家可以忽略。(a5d1d25)enableBabelRCLookup
(启用BabelRCL查找),由原来的默认开启改为了默认关闭,改过之后呢Metro
只会关注项目的.babelrc文件。在之前Metro
会关注node_modules下的.babelrc文件,这样将会导致一些问题,因为它没有Babel的版本,也没有node_modules/randompackage/.babelrc
所需的plugins/presets
。这样话开发者要解决这一问题则需要删除node_modules/**/.babelrc
,那么现在好了在从0.50版本之后getEnableBabelRCLookup
默认返回false,从而避免了这一问题。如果你不想使用这一改变,那么可以这样配置:
创建一个rn-cli.config.js
文件,并添加:
module.exports = { getEnableBabelRCLookup() { return true; }, };
然后,在node_modules
下修改.babelrc
:
{"plugins": ["dummy"]}
并确保 JS bundle能正常加载它。
ViewHelper
工具类,当设置背景时会根据当前SDK版本是16及以上或以下进行做不同的处理;
public class ViewHelper { public static void setBackground(View view, Drawable drawable) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { view.setBackground(drawable); } else { view.setBackgroundDrawable(drawable); } } }
minimumTrackTintColor
和 maximumTrackTintColor
在Android和iOS上颜色颠倒的问题,这是一个比较有意思的Bug:
对于如下代码:
<Slider style= minimumTrackTintColor="red" maximumTrackTintColor="blue" />
baseUrl
时在Android 4.1-4.3会显示出html源码,这是因为在Android 4.1-4.3中WebView不支持text/html; charset=utf-8
的MIME type。
Java到C++到JS
ViewManagers的交互问题;React/RCTJavascriptLoader.mm
的Content-Type
检查问题,在之前RCTJavascriptLoader对Content-Type
的支持是有缺陷的,只能匹配application/javascript
或text/javascript
两种类型,现在的做法是Content-Type
对以application/javascript
或text/javascript
开头的Content-Type
都可以支持;mode (enum('clock', 'spinner', 'default'))
来控制TimePicker的打开模式。
TimePicker是一个老的API了,通过TimePicker组件可以打开Android原生的时间选择对话框。
需要提醒大家的是在Android 5以下的设备只支持spinner
模式,Android 5及以上设备支持clock
, spinner
两种模式:
spinner
:
clock
也是默认方式:
DeviceInfo.isIPhoneX_deprecated
API来供开发者判断当前设备是不是iPhone X,带有小刘海的iPhone X的屏幕比其他iPhone 手机的屏幕拥有更大高度,所以对于界面布局来说,在iPhone X上需要特别适配。
DeviceInfo是React Native 0.44新增一个类专门提供屏幕尺寸,字体缩放等信息。
onDismiss
属性,这个onDismiss
接受一个function,当Modal关闭的时候会回调onDismiss。
开发指导:
<Modal onDismiss={()=>{ console.log("Modal is dismiss"); }} />
以上便是我对React Native 0.50的关键性更新的讲解和开发适配指导,如果你想学习更多关于React Native开发的技巧、经验可以学习我主讲的React Native开发视频教程
。
如果大家在适配Android和iOS中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。 另外也可以关注我的新浪微博
,或者关注我的Github
来获取更多有关React Native开发的技术干货。