React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从本人接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案。虽然,目前存在着很多的功能和性能的缺失,但是不可否认的是React Native确实在进步。 本文主要从以下几个方面来对React Native0.50+进行讲解:
Image组件React Native 0.50版本中 Image组件迎来了比较大的一个特性的改变,即在React Native 0.50及以上版本中Image不在支持包裹内容。例如: <Image style= resizeMode="center" source=>
<Text>《React Native移动开发实战》</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.
如果要在0.50+版本中使用Image组件,可以按照下面的用法: <Image style= resizeMode="center" source=/>
<Text>《React Native移动开发实战》</Text>
其他重大变更
module.exports = {
getEnableBabelRCLookup() {
return true;
},};
然后,在node_modules下修改.babelrc : {"plugins": ["dummy"]}
修复的系统bug在0.50版本中,修复的系统bug有: Android1,修复了在Android SDK 15及以下版本设置背景的Bug。在Android中设置View的背景在SDK15及以下和以上和的API是不一样的,在之前的RN版本中没有做差异判断,所以会导致在低版本设置背景的Bug,在0.50及以上版本底层实现上添加了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);
}
}
2,修复了slider的minimumTrackTintColor 和 maximumTrackTintColor在Android和iOS上颜色颠倒的问题。例如: <Slider style= minimumTrackTintColor="red" maximumTrackTintColor="blue" />
显示效果如下: 3,修复了Android 4.1-4.3 WebView的Bug。 在0.50之前的版本当使用WebView的baseUrl时在Android 4.1-4.3会显示出html源码,这是因为在Android 4.1-4.3中WebView不支持text/html的charset=utf-8的MIME type所导致的。 4,修复了View Style的overflow hidden问题。 很久以来overflow样式在Android默认为hidden而且无法更改。Android的overflow:hidden还有另外一个问题:如果父容器有borderRadius圆角边框样式,那么即便开启了overflow:hidden也仍然无法把子视图超出圆角边框的部分裁切掉。 5,修复了Java到C++到JS ViewManagers的交互问题; 6,修复了DeviceIdentity(设备标识); ios修复了React/RCTJavascriptLoader.mm的Content-Type检查问题,在之前RCTJavascriptLoader对Content-Type的支持是有缺陷的,只能匹配application/javascript或text/javascript两种类型,现在的做法是Content-Type对以application/javascript或text/javascript开头的Content-Type都可以支持; 新增功能0.50版本新增了很多的功能,本文只针对某些重点进行讲解,详细的还请阅读官方资料。通用的功能有: 通用
AndroidTimePickerTimePicker添加了mode (enum(‘clock’,‘spinner’,‘default’)) 来控制TimePicker的打开模式。 TimePicker是一个老的API了,通过TimePicker组件可以打开Android原生的时间选择对话框。Android 5以下的设备只支持spinner模式,Android 5及以上设备支持clock,spinner两种模式: Android > 5的显示方式如下: applicationId运行在构建的时候指定Android App的applicationId(Android应用的身份ID,应用的唯一标识); RAMAdded Android support for loading multiple RAM bundles。 iOS方面DeviceInfoDeviceInfo 新增DeviceInfo.isIPhoneX_deprecatedAPI来供开发者判断当前设备是不是iPhone X,带有小刘海的iPhone X的屏幕比其他iPhone 手机的屏幕拥有更大高度,所以对于界面布局来说,在iPhone X上需要特别适配。 Modal组件Modal组件新增支持onDismiss属性,这个onDismiss接受一个function,当Modal关闭的时候会回调onDismiss。 <Modal
onDismiss={()=>{
console.log("Modal is dismiss");
}
}
/>
除了上面介绍的更新内容之外,还有很多的东西,这里就不再介绍,大家可以到RN中文网查看相关最新知识。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |