ReactNative中iOS和Android的style分开设置教程
2016-07-27 14:29
519 查看
reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了.
但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时, 两个系统需要设置的数值是不一样的.
我们没必要为了一个style而创建两个文件(***.ios.js和***.android.js)当然这肯定能解决问题, 但是每次都这样做的花, 会很浪费, 而且代码冗余, 也导致重用代码率也低了.
在此跟大家介绍一个很好的解决办法, 只需要建一个style文件即可解决.
1.新建一个js文件(StyleSheet.js)
2. 然后在需要分别设置两个系统样式的地方导入该类, 而不需要再从'react-native'里导入了
const StyleSheet = require('./StyleSheet'); //假设在同一文件夹下
然后style就可以这样设置了:
然后程序就会根据系统分别设置两个不同的marginTop了.
但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是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了.
相关文章推荐
- React学习笔记
- boost asio学习笔记1--Reactor与Proactor模式
- 最新版CocoaPods的使用与安装-以导入ReactiveCocoa框架为例
- react native第三方组件问题
- React Native 开发笔记
- React-Native学习指南
- React-Native笔记
- React和Angular
- 用 React 做出好用的 Switch 组件
- react-native-pullview 下拉刷新的react native组件
- React native的安装与使用
- React-Native for iOS
- react研究(一)
- react listview最上方空白
- React Native,安装以及运行。
- React/React Native 的ES5 ES6写法对照表
- react-native ScrollView的简单应用
- react学习
- ReactiveCococa 教程(响应式编程 信号)
- 【优质】React的学习资源