React Native跨平台代码说明
来源:互联网 发布:最新版球球代点网源码 编辑:程序博客网 时间:2024/06/06 13:08
React Native跨平台代码说明
(一)前言
前面已经介绍了很多关于配置、打包等一系列技术点,接下来我讲介绍一下辅助跨平台代码的几种方式。前面曾经提到过React Native的宗旨是什么?就是Learn once,write everywhere,这句话的意思是学一门语言或技术,可以写不同平台的代码,这其中隐含的意思是在不同平台可能需要分平台编写,这就是这篇文章的目的。比如:在Android与iOS界面代码就可能需要分平台编码,虽然业务逻辑层可以复用。
(二)异文件夹区分平台
这是一种直观方式,也就是在不同的文件夹下面放置不同的组件。具体实例如下:
/common/components//android/components//ios/components/
(三)异文件名区分平台
另外一种方式是根据不同平台对组件文件名采用不同命名方式来区别,常见如下进行使用:
AlertViewIOS.jsAlertViewAndroid.js
下面两种是React Native框架支持的两种方式。
(四)异扩展名区分平台
React Native 会进行检测文件夹是否有.iOS或者.android的扩展名,然后根据当前客户端运行的平台进行加载对应的文件,例如,现在在项目有如下一些文件:
AlertView.ios.jsAlertView.android.js
只要写了两套相同的组件,并且它们提供的接口都是一致的,这时,你不需要关注当前客户端运行在哪个平台环境,React Native会自动检测不同平台的组件文件。
具体使用方式如下:
import AlertView from './components/AlertView';
React Native可以根据当前运行的平台去加载指定的组件文件。
(五)平台模块API区分平台
React Native也同样提供了检测客户端当前运行的平台模块,该模块在小范围的平台定制代码中很有用。具体如下方法:
var {Platform} = React;var styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100,});
如果当前是iOS系统,那么Platform.OS就会返回ios,反之在Android系统中就会返回android。
还有一个知识点,在Android平台上可以利用Platform模块检测Android版本。如代码所示:
var {Platform} = React;if(Platform.Version === 21){ console.log('Running on Lollipop!');}
转载自:http://www.lcode.org/
- React Native跨平台代码说明
- React Native跨平台代码说明
- react native跨平台
- React-Native编写针对平台的代码
- 用React Native编写跨平台APP
- React Native如何做跨平台设计
- 跨平台开发 React Native简介
- react Native如何实现跨平台
- React Native 代码规范
- React Native 代码片段
- react-native 代码片段
- React Native 单位详细说明
- 跨平台开发之React Native初体验
- 《React Native跨平台移动应用开发》源码
- React Native跨平台移动应用开发框架介绍
- React Native 原生平台调用React Native组件
- [React-Native]初识代码结构
- React Native 的代码规范
- Binary Tree Inorder Traversal
- CC2530之UART串口通信
- jdk源码分析之LinkedHashMap
- javaNIO学习笔记之缓冲区Buffer
- charles使用教程指南
- React Native跨平台代码说明
- 简单动画
- Android Studio中如何使用Git和Github来管理项目
- ListView滚动方向和滚动位置的探索
- 【Linux入门学习之】vi/vim编辑器必知必会
- ListView解决嵌套冲突3种办法
- ExecutorService——shutdown方法和awaitTermination方法
- Uinty利用XML来本地保存场景中的数据
- 只知编程