前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >reactNative跨平台app开发经验分享-跨平台开发兼容

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

作者头像
Mr. 柳上原
发布2019-03-04 17:07:41
2.6K0
发布2019-03-04 17:07:41
举报
文章被收录于专栏:菜鸟前端工程师

Author:Mr.柳上原

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

既然已经入了react坑

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

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

给自己

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

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

代码语言:javascript
复制
// 关于宽高大小
// 解决思路为,封装一个独立的工具函数,来处理手机不同大小尺寸的兼容

/**
 * 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>
代码语言:javascript
复制
// 关于字体
// 需要注意一点
// 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>
代码语言:javascript
复制
// 关于兼容
// 跨平台兼容的思想就是系统监控,不同的系统做兼容判断
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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.02.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档