提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

[React Native] Writing Platform-Specific Components for iOS and Android in React Native

AndroidiosReact for in and native Platform
2023-09-14 09:00:52 时间

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 />

 

相关文章