React-Native编写针对平台的代码
来源:互联网 发布:windows pe修复 编辑:程序博客网 时间:2024/05/21 12:43
前言
我们在实际项目开发中,Android和IOS平台显示的效果可能并不相同,针对不同平台编写不同代码的需求, 下面举例说明React-Native工程下几种平台区分的方法,以供参考。
用不同文件夹区分
建立不同的文件夹,存放不同平台的代码,是很常见的一种方式,大概如下:
/common/components/ /android/components/ /ios/components/
ios文件夹存放ios的组件,android文件夹存放android组件,common存放通用的组件。
用不同文件名字区分
这个比较简单,只需要区分文件即可:
ButtonIOS.jsButtonAndroid.js
此种形式不是很推荐。
拓展名区分平台
针对不同平台使用拓展名字用以区分,此种形式是React Native特有的一种方式。只要使用特定的拓展名,就会被RN框架进行区分识别。比如:
Button.ios.jsButton.android.js
这样命名组件后你就可以在其他组件中直接引用,而无需关心当前运行的平台是哪个。
import Button from './components/Button';
使用Platform模块进行区分
Platform模块是React Native提供的一个内部模块,主要用于平台的区分,我们看下代码:
container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'blue', }, }), },
var Component = Platform.select({ ios: () => require('ComponentIOS'), android: () => require('ComponentAndroid'),})();<Component />;
主要的使用方法为Platform.select, 框架会自动区分当前平台,进行组件选择。
此外我们也可以之间判断平台:
import { Platform, StyleSheet } from 'react-native';var styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100,});
Platform模块还有一个附加功能,即在android平台可以检测平台的版本号:
import { Platform } from 'react-native';if(Platform.Version === 21){ console.log('Running on Lollipop!');}
2 0
- React-Native编写针对平台的代码
- 针对在webstorm开发React Native的代码快捷设置
- 用React Native编写跨平台APP
- React Native跨平台代码说明
- React Native跨平台代码说明
- React Native 的代码规范
- react native 编写Hello World的解析
- ios的警告不针对react native A warning from Apple [resolved, not about React Native]
- react native跨平台
- 《React-Native系列》4、表单界面代码编写
- 《React-Native系列》4、表单界面代码编写
- react native android 高德地图原生代码编写
- React Native 代码规范
- React Native 代码片段
- react-native 代码片段
- react-native编写过程遇到的问题及解决方法
- 一款由React Native编写的开源App--Gank
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
- 在Nginx用htpasswd对网站进行密码保护的设置方法
- 尝试编写Rxjava + Retrofit项目网络架构
- Java连接linux虚拟机的redis报错问题解决办法
- 《Neural Networks for Machine Learning》学习二
- SDOI2005反素数
- React-Native编写针对平台的代码
- CSS布局之流动布局(湖南中兴网信首页实例)
- unity Unable to get debug signature key 的可能原因
- chrome历史版本下载
- HTTP协议详解
- Java关键字final、static使用总结
- Freeswitch 怎么配置 Proxy Media 和 bypass 模式
- 深入理解C++中public、protected及private用法
- Shiro权限控制框架 ---SpringMVC+Spring+My batis+Mysql+Maven集成开发Web项目