ReactNative中iOS和Android的style分开设置教程
reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了.
但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时, 两个系统需要设置的数值是不一样的.
我们没必要为了一个style而创建两个文件(***.ios.js和***.android.js)当然这肯定能解决问题, 但是每次都这样做的花, 会很浪费, 而且代码冗余, 也导致重用代码率也低了.
在此跟大家介绍一个很好的解决办法, 只需要建一个style文件即可解决.
1.新建一个js文件(StyleSheet.js)
'use strict'; import {StyleSheet, Platform} from 'react-native'; export function create(styles: Object): {[name: string]: number} {
const platformStyles = {};
Object.keys(styles).forEach((name) => {
let {ios, android, ...style} = {...styles[name]};
if (ios && Platform.OS === 'ios') {
style = {...style, ...ios};
}
if (android && Platform.OS === 'android') {
style = {...style, ...android};
}
platformStyles[name] = style;
});
return StyleSheet.create(platformStyles);
}
2. 然后在需要分别设置两个系统样式的地方导入该类, 而不需要再从'react-native'里导入了
const StyleSheet = require('./StyleSheet'); //假设在同一文件夹下
然后style就可以这样设置了:
const styles = StyleSheet.create({
container:{
flex:1,
ios: {
marginTop:64,
},
android: {
marginTop:44,
},
}
})
然后程序就会根据系统分别设置两个不同的marginTop了.
ReactNative中iOS和Android的style分开设置教程的更多相关文章
- 【转】Android Studio-1.2版本设置教程
如果重新安装Android Studio的话要重新配置风格选项啥的,这篇是个很好的教程,原文链接:http://blog.csdn.net/skykingf/article/details/45485 ...
- android dialog style属性设置
<!--最近做项目,用到alertDialog,用系统自带的style很难看,所以查了资料自己定义了个style. res/value/style.xml内增加以下代码:--> <s ...
- APP测试中iOS和Android的区别
一.常识性区别 二.导航方式 iOS:Tab放在页面底部,不能通过滑动来切换,只能点击.也有放在上面的,也不能滑动,但有些Tab本身可以滑动,比如天猫的.还有新闻类的应用. Android:一般放在页 ...
- app测试中,ios和android的区别
App测试中ios和Android的区别: 1. Android长按home键呼出应用列表和切换应用,然后右滑则终止应用: 2. 多分辨率测试,Android端20多种,ios较少: 3. 手机操作系 ...
- iOS 和Android中的基本日期处理
提到日期处理,主要有2个参数,一个是所在的时区,一个是所用的日历方法. 主要涉及2大类问题,一类是日期类型和字符串之间的转化,另一类是日期的计算问题.ios和android都提供了相应的类来处理问题. ...
- iOS 和 Android 中的Alert
iOS 和 Android中都有alert这种提示框,下面简单介绍下. ios中的alert叫做UIAlertView,共有4种样式,由于在ios7上,自定义alertview不太好用,所以也就这4种 ...
- iOS 和 Android 中的后台运行问题
后台机制的不同,算是iOS 和 Android的一大区别了,最近发布的iOS7又对后台处理做了一定的更改,找时间总结一下编码上的区别,先做个记录. 先看看iOS的把,首先需要仔细阅读一下Apple的官 ...
- Android应用开发中的风格和主题(style,themes)
http://www.cnblogs.com/playing/archive/2011/04/01/2002469.html 越来越多互联网企业都在Android平台上部署其客户端,为了提升用户体验, ...
- 在Quick-cocos2dx中使用云风pbc解析Protocol Buffers,支持win、mac、ios、android
本例主要介绍 如何将 pbc 集成到quick-cocos2dx框架中,让我们的cocos2dx客户端Lua拥有编解码Protocol Buffers能力. 参考: 云风pbc的用法: http:// ...
随机推荐
- 使用PushSharp给iOS应用推送消息
PushSharp是一个C#编写的服务端类库,用于推送消息到各种客户端,支持iOS(iPhone/iPad).Android.Windows Phone.Windows 8.Amazo.Blackbe ...
- WPF - 属性系统 (2 of 4)
属性更改回调 前一章的示例中,对各个参数的设置都非常容易理解.如果我们仅仅需要创建一个独立的依赖项属性,那么上面所提到的创建依赖项属性的基础知识足以满足需求.但是事情往往并非如此完美.在一个系统中,很 ...
- 博客已经迁移至 http://barretlee.com/entry/,时而同步分享到这里
博客园是一个十分好的写作平台,不过个人比较喜欢倒腾,所以将文章都做了搬迁. 博客已经迁移至 http://barretlee.com/entry/,感谢一直以来的关注和支持. 博客订阅地址: http ...
- 使用google 语言 api 来实现整个网站的翻译
---恢复内容开始--- 使用google 语言 api 来实现整个网站的翻译,这时我们可以利用免费的google api来做处理来实现多语言的功能. 放在 HTML 文件中 <div id=& ...
- 解析大型.NET ERP系统 界面与逻辑分离
Windows Forms程序实现界面与逻辑分离的关键是数据绑定技术(Data Binding),这与微软推出的ASP.NET MVC的原理相同,分离业务代码与界面层,提高系统的可维护性. 数据绑定 ...
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 高性能JavaScript--加载和执行(简要学习笔记一)
1.多数浏览器使用单一进程来处理用户界面刷新和JavaScript脚本的执行.所以同一时刻只能做同一件事.JavaScript执行过程耗时越久,浏览器等待相应的时间就越长. 2.<scrip ...
- 纪录我的iOS学习之路
学习资料的网址 田伟宇(Casa Taloyum)有几篇介绍iOS架构的文章,一级棒!原博客链接. iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方 ...
- 前端学PHP之PDO基础操作
× 目录 [1]创建PDO [2]使用PDO [3]事务处理 前面的话 PDO(php data object)扩展类库为php访问数据库定义了轻量级的.一致性的接口,它提供了一个数据库访问抽象层,这 ...
- Android自定义控件之自定义ViewGroup实现标签云
前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...