reactNative跨平台app开发经验分享-跨平台开发兼容

Author：Mr.柳上原

付出不亚于任何的努力
愿我们所有的努力，都不会被生活辜负
不忘初心，方得始终

既然已经入了react坑

那自然不会少了移动端app开发神器RN

初衷依然是把自己在公司实际开发中遇到的踩坑填坑过程记录下来

给自己

也分享给同样从事这行的各位新入行朋友做个爬坑指南

首先
reactNative我在这里简称RN
RN是可以做跨平台开发的
这就导致了一个问题
RN的组件，在Android和ios上有些会有所不同
RN的样式编辑，在Android和ios上有些也会有所不同
这就涉及到了平台兼容
比较常见的兼容问题有：
大小，宽高，字体，不同手机系统的独占组件等等
如何解决这些问题
我是这样做的：

// 关于宽高大小
// 解决思路为，封装一个独立的工具函数，来处理手机不同大小尺寸的兼容

/**
 * Created by zhuoy on 2017/6/27.
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */

/*
 设备的像素密度，例如：
 PixelRatio.get() === 1          mdpi Android 设备 (160 dpi)
 PixelRatio.get() === 1.5        hdpi Android 设备 (240 dpi)
 PixelRatio.get() === 2          iPhone 4, 4S,iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 设备 (320 dpi)
 PixelRatio.get() === 3          iPhone 6 plus , xxhdpi Android 设备 (480 dpi)
 PixelRatio.get() === 3.5        Nexus 6       */

 import { Dimensions, PixelRatio } from 'react-native';

 export const deviceWidth = Dimensions.get('window').width;      //设备的宽度
 export const deviceHeight = Dimensions.get('window').height;    //设备的高度
 let fontScale = PixelRatio.getFontScale();                      //返回字体大小缩放比例
 
 let pixelRatio = PixelRatio.get();      //当前设备的像素密度
 const defaultPixel = 2;                           //iphone6的像素密度
 //px转换成dp
 const w2 = 750 / defaultPixel;
 const h2 = 1334 / defaultPixel;
 const scale = Math.min(deviceHeight / h2, deviceWidth / w2);   //获取缩放比例
 const scaleWidth = deviceWidth / w2
 /**
  * 设置text为sp
  * @param size sp
  * return number dp
*/

export function setSpText(size) {
  size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
  return size / defaultPixel;
}

export function scaleSize(size) { // 不适用小比例缩放
  size = Math.round(size * scaleWidth);
  return size / defaultPixel;
}
export function scaleWidthSize(size) {
  size = Math.round(size * scaleWidth);
  return size / defaultPixel;
}


// 一般我们会使用scaleSize这个函数，其他特殊地方使用另外两个函数处理
//使用方法
// 在页面引入该工具函数

import { scaleSize } from "../utils/screenUtil";

// 在标签内部写入行间样式
<View style={{marginRight: scaleSize(40)}}>
</View>

// 在css里写入外部样式
// 外部样式引用工具函数的方法：把外部样式用js写法表示
import { scaleSize } from "../utils/screenUtil";

const styles = StyleSheet.create({
  ListItem: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 15,
        paddingRight: 15,
        height: scaleSize(100),
        justifyContent: 'space-between',
    },
status: {
        position: 'absolute',
        right: scaleSize(15),
        top: scaleSize(15),
    },
    numberInput: {
        paddingRight: scaleSize(20),
    },
})
// 然后把该外部样式引入需要的页面
import { styles } from "../css/styles ";
// 调用该样式
<View style={styles.ListItem, styles.status, styles.numberInput}>
</View>

// 复合写法
// 同时使用外部样式和行内样式
<View style={[styles.ListItem, styles.status, styles.numberInput, {marginRight: scaleSize(40)}]}>
</View>

// 关于字体
// 需要注意一点
// ios改变字体需要在node_modules里引入字体库并进行关联设置，不然开发ios app的时候使用自定义字体时会报错，具体设置百度上都有
// 简单的方法是：如果Android实在需要自定义字体，可以使用系统监控，做ios的兼容判断，去除ios自定义字体
import { Platform } from 'react-native';
const ios = Platform.OS === 'ios';

<View style={{
      display: 'flex', flexDirection: 'column', 
      fontFamily: ios ? null : "PingFangSC-Regular",
}}>
</View>

// 关于兼容
// 跨平台兼容的思想就是系统监控，不同的系统做兼容判断
import { Platform } from 'react-native';
const ios = Platform.OS === 'ios';

// 比如
<View style={{
      display: 'flex', flexDirection: 'column', 
      fontFamily: ios ? null : "PingFangSC-Regular",
}}>
</View>

// 比如
<TabBar.Item title='首页'
       icon={ ios ? require('./images/sy_ios_select.png') : require('./images/sy.png')}
       selectedIcon={ ios ? require('./images/sy_ios_select.png') : require('./images/sy_select.png')}
       selected={this.state.selectedTab === 'index'} onPress={() => {Toast.hide(); this.changeTab('index');}}>
          {
            this.state.selectedTab === 'index'
            ? <View style={[LayerStyles.xyhLayer, {bottom: tabBottom}]}>
                   {Platform.OS === 'android' ? null : <StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0.2)" />}
                       {           
                         <View style={[LayerStyles.scrollPanel, { backgroundColor: 'transparent', zIndex: 1 }]}>
                             {this.props.topbar}
                             {children} 
                          </View>
                        }
                         {
                           this.props.pageBackground
                           ? this.props.pageBackground
                           : null
                         }
                         {
                           this.props.showLoading
                           ? (<Spinner />)
                           : null
                          }
               </View>
               : null
            }
</TabBar.Item>