mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 17:15:54 +00:00
b1e49832ef
Summary: We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs. **For guides**: `previous` is manually inserted into the metadata of the actual markdown file. **For APIs/Components**: `previous` is established via code within `extractDocs.js` > This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close. Closes https://github.com/facebook/react-native/pull/8754 Differential Revision: D3557972 Pulled By: hramos fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a
98 lines
3.0 KiB
Markdown
98 lines
3.0 KiB
Markdown
---
|
|
id: platform-specific-code
|
|
title: Platform Specific Code
|
|
layout: docs
|
|
category: Guides
|
|
permalink: docs/platform-specific-code.html
|
|
next: gesture-responder-system
|
|
previous: upgrading
|
|
---
|
|
|
|
When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android.
|
|
|
|
React Native provides two ways to easily organize your code and separate it by platform:
|
|
|
|
* Using the [`Platform` module](#platform-module).
|
|
* Using [platform-specific file extensions](#platform-specific-extensions).
|
|
|
|
Certain components may have properties that work on one platform only. All of these props are annotated with `@platform` and have a small badge next to them on the website.
|
|
|
|
|
|
## Platform module
|
|
|
|
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
|
|
|
|
```javascript
|
|
import { Platform, StyleSheet } from 'react-native';
|
|
|
|
const styles = StyleSheet.create({
|
|
height: (Platform.OS === 'ios') ? 200 : 100,
|
|
});
|
|
```
|
|
|
|
`Platform.OS` will be `ios` when running on iOS and `android` when running on Android.
|
|
|
|
There is also a `Platform.select` method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.
|
|
|
|
```javascript
|
|
import { Platform, StyleSheet } from 'react-native';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
...Platform.select({
|
|
ios: {
|
|
backgroundColor: 'red',
|
|
},
|
|
android: {
|
|
backgroundColor: 'blue',
|
|
},
|
|
}),
|
|
},
|
|
});
|
|
```
|
|
|
|
This will result in a container having `flex: 1` on both platforms, a red background color on iOS, and a blue background color on Android.
|
|
|
|
Since it accepts `any` value, you can also use it to return platform specific component, like below:
|
|
|
|
```javascript
|
|
const Component = Platform.select({
|
|
ios: () => require('ComponentIOS'),
|
|
android: () => require('ComponentAndroid'),
|
|
})();
|
|
|
|
<Component />;
|
|
```
|
|
|
|
### Detecting the Android version
|
|
|
|
On Android, the `Platform` module can also be used to detect the version of the Android Platform in which the app is running:
|
|
|
|
```javascript
|
|
import { Platform } from 'react-native';
|
|
|
|
if(Platform.Version === 21){
|
|
console.log('Running on Lollipop!');
|
|
}
|
|
```
|
|
|
|
## Platform-specific extensions
|
|
|
|
When your platform-specific code is more complex, you should consider splitting the code out into separate files. React Native will detect when a file has a `.ios.` or `.android.` extension and load the relevant platform file when required from other components.
|
|
|
|
For example, say you have the following files in your project:
|
|
|
|
```sh
|
|
BigButton.ios.js
|
|
BigButton.android.js
|
|
```
|
|
|
|
You can then require the component as follows:
|
|
|
|
```javascript
|
|
const BigButton = require('./BigButton');
|
|
```
|
|
|
|
React Native will automatically pick up the right file based on the running platform.
|