5.3 KiB
id, title, original_id
| id | title | original_id |
|---|---|---|
| version-0.22-platform-specific-code | platform-specific-code | platform-specific-code |
Platform Specific Code # | Edit on GitHub |
When building a cross-platform app, the need to write different code for different platforms may arise. This can always be achieved by organizing the various components in different folders:
Another option may be naming the components differently depending on the platform they are going to be used in:
But React Native provides two alternatives to easily organize your code separating it by platform:
Platform specific extensions #
React Native will detect when a file has a .ios. or .android. extension and load the right file for each platform when requiring them from other components.
For example, you can have these files in your project:
With this setup, you can just require the files from a different component without paying attention to the platform in which the app will run.
React Native will import the correct component for the running platform.
Platform module #
A module is provided by React Native to detect what is the platform in which the app is running. This piece of functionality can be useful when only small parts of a component are platform specific.
var styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });
Platform.OS will be ios when running in iOS and android when running in an Android device or simulator.
Detecting Android version #
On Android, the Platform module can be also used to detect which is the version of the Android Platform in which the app is running
if(Platform.Version === 21){ console.log('Running on Lollipop!'); }