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. Mysql多实例安装+主从复制+读写分离 -学习笔记

    Mysql多实例安装+主从复制+读写分离 -学习笔记 .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px ...

  2. Shell中反引号(`)与$()用法的区别

    今天有人提问: echo `echo \\\\\\\w` echo $(echo \\\\\\\w) 为什么输出的不一样? 这就引申出了另一个问题:反引号与$()有没有区别? 这是一个非常有意思的问题 ...

  3. 1.2 Use Cases中 Metrics官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Metrics 指标 Kafka is often used for operati ...

  4. ORA-16014 ORA-00312

    打开alert日志发现如下错误信息 Errors in file /oracle/app/oracle/admin/hncdfhq/bdump/hncdfhq_arc0_45285882.trc: O ...

  5. 各大免费邮箱邮件群发账户SMTP服务器配置及SMTP发送量限制情况

    网络产品推广和新闻消息推送时,经常用到的工具就是用客户邮箱发送邮件了,如果是要发送的邮件量非常大的话,一般的建议是搭建自己的邮局服务器,或者是花钱购买专业的邮件群发服务,免费邮箱的SMTP适合少量的邮 ...

  6. [Angular] Using the Argon 2 Hashing Function In Our Sign Up Backend Service

    Which hash algorithom to choose for new application: https://www.owasp.org/index.php/Password_Storag ...

  7. hadoop组件及其作用

    1.hadoop有三个主要的核心组件:HDFS(分布式文件存储).MAPREDUCE(分布式的计算).YARN(资源调度),现在云计算包括大数据和虚拟化进行支撑. 在HADOOP(hdfs.MAPRE ...

  8. (转)30 IMP-00019: row rejected due to ORACLE error 12899

    IMP: row rejected due IMP: ORACLE error encountered ORA: value too large , maximum: )导入日志报 IMP: 由于 O ...

  9. 在react底下安装环境

    1.在react底下安装环境 Image.png Image.png 2.新建一个文件夹 Image.png 3.配置入口文件redux:staticRoot+'/redux/app' Image.p ...

  10. vscode markdown-all-in-one 源码编译成vsix

    https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one 有链接 Download Extensio ...