React native 技术中 android 和 iOS 平台差异

最新推荐文章于 2021-05-28 03:04:45 发布

ahubenkui

最新推荐文章于 2021-05-28 03:04:45 发布

阅读量3k

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/ahubenkui/article/details/72835224

版权

React Native 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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.

ahubenkui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React native 技术中 android 和 iOS 平台差异

1 在android 开发和iOS 开发中会有平台的差异性1 在开发中，发现android 平台对js 数据类型的要求，相对于ios 平台要严格些，案例，在展现大图的时候，android 平台点击图片没有生效，但是在ios 中是ok 这就涉及到平台的差异性，代码中调用查看大图的方法是 commentRoomPictureClick(index) { Log.logCode('c_ro
复制链接

扫一扫