1 在android 开发和iOS 开发中 会有平台的差异性
1 在开发中,发现android 平台对js 数据类型的要求,相对于ios 平台要严格些,案例,
在展现大图的时候,android 平台 点击图片没有生效,但是在ios 中是ok 这就涉及到平台的差异性,
代码中调用查看大图的方法是
commentRoomPictureClick(index) {
Log.logCode('c_roompicture_click');
const imagesData = this.props.ImageInfosList;
const photoList = [];
for (let i = 0; i < imagesData.length; i++) {
const aPhoto = {};
aPhoto.imageUrl = imagesData[i].ImageItems[1].ImageUrl;
photoList.push(aPhoto);
}
const shareDatailList = [];
const meta = { isThumbnailMode: false, businessCode: 'share_from_commentList' };
PhotoBrowser.show(photoList, shareDatailList, index, meta);
}
这段代码是android 平台改好后的代码,shareDetailList 原来传值为null
但是在android 平台显示是undefined 的
参考例子:
let image_url_list = [
"http://images4.c-ctrip.com/target/hotel/23000/22108/ee244141a4874db7aeb034d3bd043306_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/2af603271331419f98188d685ed34440_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/e7394b8fdcae4a508233c81d86d59e52_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/99a2ba33cd7145d6a9fed792ea21a928_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/42c377761e514fd8af480d8e9212b2e9_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/3cf99b563c8b487cb4c896af2c0beb11_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/7df0a453a999474b9cff830379d31d73_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/310b258257ed4c6d987efbfbb0990de3_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/55abe81cf64848a89b992c5c066a4f64_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/a426f2b806b74982aa40d5859b5e0730_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/5aaab8b0fc6f48af98e7780b13b358f5_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/e610042451634bec8a34f541143a6260_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/ee244141a4874db7aeb034d3bd043306_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/2af603271331419f98188d685ed34440_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/e7394b8fdcae4a508233c81d86d59e52_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/99a2ba33cd7145d6a9fed792ea21a928_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/42c377761e514fd8af480d8e9212b2e9_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/3cf99b563c8b487cb4c896af2c0beb11_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/7df0a453a999474b9cff830379d31d73_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/310b258257ed4c6d987efbfbb0990de3_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/55abe81cf64848a89b992c5c066a4f64_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/a426f2b806b74982aa40d5859b5e0730_550_412.jpg",
"http://images4.c-ctrip.com/target/hotel/23000/22108/5aaab8b0fc6f48af98e7780b13b358f5_550_412.jpg",
"http://images4.c-ctrip.com/target/fd/cruise/g4/M08/E9/10/CggYHFXIbumAQwwYABSJrimvDoE335.jpg"
];
let photoList = [];
for (let i = 0; i < image_url_list.length; i++) {
let aPhoto = {};
let tmpImageUrl = image_url_list[i];
aPhoto.imageUrl = tmpImageUrl;
aPhoto.imageThumbnailUrl = tmpImageUrl.replace("550_412","300_225");
if (i == 3 || i == 4 || i == 5) {
aPhoto.category = "酒店外观3";
}
else if (i == 0 || i == 1 || i == 2 || i == 9) {
aPhoto.category = "酒店景色4";
}
else if (i == 6 || i == 7) {
aPhoto.category = "酒店bla2";
}
else if (i == 8) {
aPhoto.category = "Only One";
}
else {
aPhoto.category = "默认";
}
aPhoto.imageTitle = "这个是Title:"+aPhoto.category;
aPhoto.imageDescription = "本次酒店的广告活--动主要有blablabla。。。。。本次酒店的广告.活动主要有blablabla。。。。。本次酒店的广告活动主要有blablabla。。。。。本次酒店的广告活--.动主要有blablabla。。。。。本次酒店的广告活动主要有blablabla。。。。。本次酒店的广告活动主要有blablabla。。。。。本次酒店的广.告活动主要有blablabla。。。。。"+aPhoto.imageDescription;
photoList.push(aPhoto);
}
let shareDataList = [
{
title:"分享酒店",
text:"本次酒店的广告,这本书的简介大概是这样",
linkUrl:"http://csdn.net",
imageUrl:"http://images4.c-ctrip.com/target/hotel/23000/22108/e610042451634bec8a34f541143a6260_550_412.jpg", //说明,此处imageUrl不需要设置,会默认使用当前图片的URL
shareType:"Default"
}
];
let meta = {isThumbnailMode:false, businessCode:"share_from_home"};});
PhotoBrowser.show(photoList, shareDataList, 0, meta);
可以看出 shareDetailList 是数组,但是iOS 平台上传的object 在那个平台上是执行通过,但是在android 平台上就有问题。
2
ios 代码
//存储点评有用
static saveCommentUserfuls(commentId) { CommentListStorage.loadCommentUserfuls((CommentIds) => {
let comments = new Array();
if (CommentIds) {
comments = CommentIds;
comments.push(CommentIds);
}
comments.push(commentId);
Storage.save({ key: commentUserfulKey, value: comments, domain: saveDomain }); });
}
android 代码
static saveCommentUserfuls(commentId) { CommentListStorage.loadCommentUserfuls((CommentIds) => {
const comments = new Array(); comments.push(CommentIds); comments.push(commentId);
Storage.save({ key: commentUserfulKey, value: comments, domain: saveDomain });
});
}
在android 平台上run iso 的代码 会提示 comments.push not a function ,通过log 显示commentIds 是String 类型的,并不是数组,所以在android 平台会报错,但是在iOS 平台上就是ok 的
3 在android 和iso 进行适配的过程中 采取的方案
export function hotelR() {
const screenWidth = Dimensions.get('window').width;
if (Platform.OS === 'ios') {
return (screenWidth / 375);
} else {
return (screenWidth / 360);
}
}
这样利用hotelR 进行双平台的适配
export function hotelR() {
const screenWidth = Dimensions.get('window').width;
if (Platform.OS === 'ios') {
return parseInt(screenWidth / 375);
} else {
return parseInt(screenWidth / 360);
}
}
这样暂时解决渲染出不来的问题,但是大部分的机器得到的值都是1 这样就达不到适配的效果,还出现了问题,当android 的小手机,
parseInt (sreenWidth /360) 会出现0 的 情况,那么 我门做的页面就再也渲染不出来了。对于以上的情况 我们 弄了 新的适配方式
/**
* 屏幕工具类
* ui设计基准,iphone 6
* width:750
* height:1334
*/
import {
PixelRatio,
Dimensions,
} from 'react-native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
const pixelRatio = PixelRatio.get();
const fontScale = PixelRatio.getFontScale();
const r2 = 2;
const w2 = 750 / r2;
const h2 = 1334 / r2;
/**
* 设置text为sp
* @param size sp
* @returns {Number} dp
*/
export const DEFAULT_DENSITY = 2;
export function setSpText(size) {
const scaleWidth = screenW / w2;
const scaleHeight = screenH / h2;
const scale = Math.min(scaleWidth, scaleHeight);
const rSize = Math.floor((size * scale + 0.5) * pixelRatio / fontScale);
return rSize / DEFAULT_DENSITY;
}
/**
* 屏幕适配,缩放size
* @param size
* @returns {Number}
* @constructor
*/
export function scaleSize(size) {
const scaleWidth = screenW / w2;
const scaleHeight = screenH / h2;
const scale = Math.min(scaleWidth, scaleHeight);
const rSize = Math.floor(((size * scale) + 0.5));
return rSize / DEFAULT_DENSITY;
}
这样优点是考虑横切屏的问题。
4 ,但是在mcd 平台 打离线包的时候,很多手机(小米和华为出现的概率比较多)RN 页面渲染不出来, 出现问题的原因是在实际的代码中用到了 lineHeight 这个属性,在android 平台只能设置成int,如果设置成小数点,会出现
其实好多机器是不弹红屏,直接渲染不出来。
log
com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `int64', but had type `double' at com.facebook.react.bridge.ReadableNativeMap.getInt(Native Method) at com.facebook.react.uimanager.ReactStylesDiffMap.getInt(ReactStylesDiffMap.java:67)
处理的时候要区分平台
5 在切换iso 平台和android 的时候, 使用到zIndex 属性。
android 这边是直接显示不出来,
原因是
zIndex property is supported as of react-native version 0.29.0 for iOS.