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编写针对平台的代码

前言我们在实际项目开发中,Android和IOS平台显示的效果可能并不相同,针对不同平台编写不同代码的需求, 下面举例说明React-Native工程下几种平台区分的方法,以供参考。用不同文件夹区分...
  • jiangbo_phd
  • jiangbo_phd
  • 2017年01月23日 14:10
  • 3220

React Native如何做跨平台设计

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

跨平台开发之React Native初体验

ReactNative,你必须知道的事实,它越来越火!作为移动开发者,唯一不能拒绝的就是持续性学习。let’s start!它使你能够在Javascript和React的基础上获得完全一致的开发体验,...
  • dzsw0117
  • dzsw0117
  • 2016年06月16日 11:19
  • 1212

React Native跨平台代码说明

http://blog.csdn.net/u014484863/article/details/51564350 (一)前言 前面已经介绍了很多关于配置、打包等一系列技术点,接下来我讲...
  • oMingZi12345678
  • oMingZi12345678
  • 2016年12月08日 00:58
  • 373

react native 开发跨平台github

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

React Native跨平台移动应用开发试读样章

  • 2016年12月29日 14:56
  • 1.21MB
  • 下载

React Native跨平台移动应用开发 pdf 完整版

  • 2017年07月23日 13:45
  • 70.92MB
  • 下载

React Native 跨平台移动应用开发 原版扫描

  • 2017年12月28日 14:16
  • 62.75MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native跨平台代码说明
举报原因:
原因补充:

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