【React Native】文件翻譯閱讀紀錄 - 指南 - 平台特定代碼
 |
| Facebook Open Source React Native |
構建跨平台應用程序時，您需要盡可能多地重用代碼。如果代碼有所不同，可能會出現場景，例如，您可能希望為iOS和Android實現單獨的可視組件。
React Native提供了兩種方法來輕鬆組織代碼並按平台分隔：
React Native提供了兩種方法來輕鬆組織代碼並按平台分隔：
- 使用平台模塊。
- 使用特定於平台的文件擴展名。
某些組件可能具有僅在一個平台上工作的屬性。所有這些道具都使用@platform註釋，並在網站旁邊有一個小徽章。
平台模塊
React Native提供了一個模塊，用於檢測運行應用程序的平台。您可以使用檢測邏輯來實現特定於平台的代碼。當只有組件的小部分是特定於平台時，請使用此選項。
import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100,
});
當在Android上運行時，在iOS和Android上運行時，Platform.OS將是ios。
還有一個Platform.select方法可用，給定一個包含Platform.OS作為鍵的對象，返回當前運行的平台的值。
import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});
這將導致容器在兩個平台上具有flex：1，在iOS上具有紅色背景顏色，在Android上具有藍色背景顏色。
由於它接受任何值，您還可以使用它來返回特定於平台的組件，如下所示：
由於它接受任何值，您還可以使用它來返回特定於平台的組件，如下所示：
const Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();
<Component />;
檢測Android版本
在Android上，Platform模塊還可用於檢測運行應用程序的Android平台的版本：
import {Platform} from 'react-native';
if (Platform.Version === 25) {
console.log('Running on Nougat!');
}
檢測iOS版本
在iOS上，Version是 - [UIDevice systemVersion]的結果，它是一個包含當前操作系統版本的字符串。系統版本的示例是“10.3”。例如，要檢測iOS上的主要版本號：
import {Platform} from 'react-native';
const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
console.log('Work around a change in behavior');
}
特定於平台的擴展
當特定於平台的代碼更複雜時，您應該考慮將代碼拆分為單獨的文件。 React Native將檢測文件何時具有.ios。或.android。在需要時從其他組件擴展並加載相關平台文件。
例如，假設您的項目中包含以下文件：
例如，假設您的項目中包含以下文件：
BigButton.ios.js
BigButton.android.js
然後，您可以按如下方式要求組件：
const BigButton = require('./BigButton');
React Native將根據運行平台自動選擇正確的文件。
0 意見