React Native跨平台代码说明

转载 2016年06月02日 10:21:04

React Native跨平台代码说明

(一)前言

前面已经介绍了很多关于配置、打包等一系列技术点,接下来我讲介绍一下辅助跨平台代码的几种方式。前面曾经提到过React Native的宗旨是什么?就是Learn once,write everywhere,这句话的意思是学一门语言或技术,可以写不同平台的代码,这其中隐含的意思是在不同平台可能需要分平台编写,这就是这篇文章的目的。比如:在Android与iOS界面代码就可能需要分平台编码,虽然业务逻辑层可以复用。

(二)异文件夹区分平台

这是一种直观方式,也就是在不同的文件夹下面放置不同的组件。具体实例如下:

/common/components/
/android/components/
/ios/components/

(三)异文件名区分平台

另外一种方式是根据不同平台对组件文件名采用不同命名方式来区别,常见如下进行使用:

AlertViewIOS.js
AlertViewAndroid.js

下面两种是React Native框架支持的两种方式。

(四)异扩展名区分平台

React Native 会进行检测文件夹是否有.iOS或者.android的扩展名,然后根据当前客户端运行的平台进行加载对应的文件,例如,现在在项目有如下一些文件:

AlertView.ios.js
AlertView.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 开发跨平台github

  • 2017年11月09日 17:06
  • 77B
  • 下载

移动应用跨平台框架江湖将现终结者?速来参拜来自Facebook的React Native

React Native使用初探February 06 2015Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法。该方法运用...

React Native跨平台移动应用开发框架介绍

好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能是因为一个人生活,少了很多动力吧。这都是在给自己找理由。我在不偷懒了。 最近我要入坑了,公司安排我要开始搞React Nat...
  • m366917
  • m366917
  • 2017年03月11日 18:32
  • 1862

基于iOS和Android的react-native跨平台漫画App

ComicBook ComicBook项目参考了ComicApp的部分设计和部分代码,ComicBook是ComicApp的重构版。本项目架构清晰,代码简洁,还配套完整的视频。http://yi...

使用react-native-pull实现跨平台Android&IOS下拉刷新滑动回弹效果

react-native-pull包含PullView & PullList两个实现下拉刷新的react native组件,可支持android & ios,简单易用! 纯js代码,基于Scroll...
  • vohyeah
  • vohyeah
  • 2016年07月30日 16:09
  • 2213

React Native跨平台移动应用学习与开发(一) 环境的搭建

因为小编是iOS开发,在这里我只介绍关于Mac环境和iOS开发,请大家谅解。 前期因为版本太快,需要随时更新,这里给出官方文档地址 http://facebook.github.io/react-...

React Native如何做跨平台设计

React Native 的一大优势是:可以只用一种语法编写分别运行在 iOS 和 Android 平台上的程序,且可重用部分应用逻辑。 然而,与“一次编写,到处运行”的理念不同的是,React N...
  • yeana1
  • yeana1
  • 2016年08月02日 15:37
  • 3622

跨平台开发之React Native初体验

ReactNative,你必须知道的事实,它越来越火!作为移动开发者,唯一不能拒绝的就是持续性学习。let’s start!它使你能够在Javascript和React的基础上获得完全一致的开发体验,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native跨平台代码说明
举报原因:
原因补充:

(最多只允许输入30个字)