Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.

There are two ways to code for different platform.
 
1. Using 'Platform' from 'react-native' package.
import {Platform} from 'react-native';
... render() {
if(Platform.OS === 'ios') {
let info = <Text>From ios</Text>
} else if(Platform.OS === 'android'){
let info = <Text>From Android</Text>
}
}

This way works, but really not a good approach.

2. Using .ios & .android as file extention:

Create two files 'info.android.js' & 'info.ios.js':

// info.ios.js

import React from 'react';
import {Text} from 'react-native'; export const PInfo = () => (
<Text>iOS</Text>
); // info.android.js import React from 'react';
import {Text} from 'react-native'; export const PInfo = () => (
<Text>Android</Text>
);

Then we can use those component by:

// Import the file without extension

import {PInfo} from './info';

// Use it as normal
<PInfo />

[React Native] Writing Platform-Specific Components for iOS and Android in React Native的更多相关文章

  1. React Native之code-push的热更新(ios android)

    React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...

  2. javascript开发 ios和android app的简单介绍

    先看几个名词解释: nodejs ionic,Cordova,phoneGap,anjularjs react-native,reactjs nodeJs 的介绍参见这里,写的很好http://www ...

  3. React Native 轻松集成分享功能(iOS 篇)

    产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...

  4. React Native之支付集成(微信 支付宝)(ios android)

    React Native之支付集成(微信 支付宝)(ios android) 一,需求分析 1.1,app在线充值与提现 二,技术介绍与集成 2.1,微信支付 2.1.1,Android配置 详细配置 ...

  5. 《React Native 精解与实战》书籍连载「配置 iOS 与 Android 开发环境」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  7. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

  8. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  9. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

随机推荐

  1. wmi 一些配置(参考)

    http://www.bubuko.com/infodetail-1937463.html

  2. Warning: Division by zero in 错误处理

    Warning: Division by zero in 错误处理 今天调试一段代码,结果提示 Warning: Division by zero in ,没有扫到答案,最后发现 $dir/$name ...

  3. python文件的操作

    文件的操作,归根结底就只有两种:打开文件.操作文件 一.打开文件:文件句柄 = open('文件路径', '模式') python中打开文件有两种方式,即:open(...) 和  file(...) ...

  4. 00092_字符输出流Writer

    1.字符输出流Writer (1)既然有专门用于读取字符的流对象,那么肯定也有写的字符流对象: (2)查阅API,发现有一个Writer类,Writer是写入字符流的抽象类.其中描述了相应的写的动作. ...

  5. Valgrind的用法

    Valgrind是执行在Linux上一套基于仿真技术的程序调试和分析工具,它包括一个内核──一个软件合成的CPU,和一系列的小工具,每一个工具都能够完毕一项任务──调试.分析,或測试等. Valgri ...

  6. 关于PyYAML报错问题解决

    转自:http://www.fwqtg.net/%E5%85%B3%E4%BA%8Epyyaml%E6%8A%A5%E9%94%99%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86% ...

  7. Docker---(1)Docker 简介

    原文:Docker---(1)Docker 简介 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_39 ...

  8. 【例题 6-13 UVA - 1103】Ancient Messages

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每个图案里面的"洞"的个数都是不同的. 则可以根据这个判别每个图像是什么. 先用dfs确定轮廓之后. 再从每个白 ...

  9. ThreadPoolExecutor – Java Thread Pool Example(如何使用Executor框架创建一个线程池)

    Java thread pool manages the pool of worker threads, it contains a queue that keeps tasks waiting to ...

  10. PHP的工作原理和生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013778883/article/details/79831035   php是一门适用于web开 ...