[React Native] Writing Platform-Specific Components for iOS and Android in React Native
2024-09-08 04:09:08
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 />
最新文章
- javascript代码 调试方法
- JS验证图片格式和大小并预览
- Could not load file or assembly Microsoft.Web.Infrastructure
- 使用mysqladmin ext了解MySQL运行状态【转】
- 线程学习笔记(EventWaitHandler)AutoResetEvent的使用
- maven3 junit4 spring3 jdk8 :junit一直报错,害的我几个星期都是这个错,你妹的!
- CSS 水平居中
- 在windows下安装GIT
- csuoj 1354: Distinct Subsequences
- uva 12171 hdu 1771 Sculpture
- Struts2的整体回顾(Action, 拦截器, 值栈, OGNL表示式, ModelDriven)
- rails无法使用页面缓存的解决办法
- STA 463 Simple Linear Regression Report
- poj2559 Largest Rectangle in a Histogram
- 【原创】python模拟腾讯网页登录
- centos7里面docker不能下载本地源
- 29 Socketserver和 ftp
- MVC仓储类Repository
- Java------遍历Map<;k,v>;的方法
- Android成长之路-编码实现软件界面
热门文章
- 【hdu 1533】Going Home
- [MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试
- 不安装谷歌市场,下载谷歌市场中的APK
- Appium_Java_API
- 【干货】前端开发者最常用的六款IDE
- solrcloud集群搭建
- Android 迭代器 Iteraor迭代器以及foreach的使用
- Javascript和jquery事件--事件对象event
- [Android5.1]ActivityManagerService启动过程分析
- [Angular] Intercept HTTP requests in Angular