[Docs] Document Platform in the modules section of the docs #3701
This commit is contained in:
Родитель
d5daef08ef
Коммит
3686facdda
|
@ -0,0 +1,67 @@
|
||||||
|
---
|
||||||
|
id: platform-specific-code
|
||||||
|
title: Platform Specific Code
|
||||||
|
layout: docs
|
||||||
|
category: Guides
|
||||||
|
permalink: docs/platform-specific-code.html
|
||||||
|
next: native-modules-ios
|
||||||
|
---
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
/common/components/
|
||||||
|
/android/components/
|
||||||
|
/ios/components/
|
||||||
|
```
|
||||||
|
|
||||||
|
Another option may be naming the components differently depending on the platform they are going to be used in:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
BigButtonIOS.js
|
||||||
|
BigButtonAndroid.js
|
||||||
|
```
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
BigButton.ios.js
|
||||||
|
BigButton.android.js
|
||||||
|
```
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var BigButton = require('./components/BigButton');
|
||||||
|
```
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var {Platform} = React;
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var {Platform} = React;
|
||||||
|
|
||||||
|
if(Platform.Version === '5.0'){
|
||||||
|
console.log('Running on Lollipop!');
|
||||||
|
}
|
||||||
|
```
|
|
@ -4,7 +4,7 @@ title: Upgrading
|
||||||
layout: docs
|
layout: docs
|
||||||
category: Guides
|
category: Guides
|
||||||
permalink: docs/upgrading.html
|
permalink: docs/upgrading.html
|
||||||
next: native-modules-ios
|
next: platform-specific-code
|
||||||
---
|
---
|
||||||
|
|
||||||
Upgrading to new versions of React Native will give you access to more APIs, views, developer tools
|
Upgrading to new versions of React Native will give you access to more APIs, views, developer tools
|
||||||
|
|
Загрузка…
Ссылка в новой задаче