zoukankan      html  css  js  c++  java
  • [React Native] Writing Platform-Specific Components for iOS and Android in React Native

    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 />
  • 相关阅读:
    从 i++ 和 ++i 说起局部变量表和操作数栈
    数据库连接情况查询相关sql语句
    db2相关语句
    BeanUtils源码详解
    Spring注解驱动开发之AOP
    Spring注解驱动开发之IOC
    正则表达式
    linux特殊符号
    linux下面如何让一个软件/命令开机自启动
    linux文件属性
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6399846.html
Copyright © 2011-2022 走看看