react-native系列(17)API篇:Platform平台差异化加载

你的名字 2021-09-18 11:06 655阅读 0赞

Platform模块用于区分移动设备的操作系统及api版本,另外,还可以根据不同平台的后缀扩展名自动识别并装载组件。

系统区分

要检测当前设备是什么操作系统,可以使用:

  1. const os = Platform.OS; // android|ios

要获取版本,可以使用:

  1. const version = Platform.Version;

后缀扩展名

当不同平台的代码逻辑较为复杂时,最好是放到不同的文件里,这时候我们可以使用后缀扩展名写法。React Native 会检测某个文件是否具有.ios.或是.android.的扩展名,然后根据当前运行的平台自动加载正确对应的文件。

  1. Comp.android.js
  2. Comp.ios.js

在请求这类组件时,可以使用import或require:

  1. // 引用方式一
  2. import CompFromExpansionName from './Comp';
  3. // 引用方式二
  4. const CompFromExpansionName = require('./Comp').default;

Platform.select函数

如果不使用后缀扩展名或不同系统下需要加载不同组件时,可以通过Platform.select函数来实现:

  1. const CompFromPlatfromSelect = Platform.select({
  2. ios: () => require('./CompIOS'), // ios系统加载CompIOS组件
  3. android: () => require('./CompAndroid') // android系统加载CompAndroid组件
  4. })().default;

贴上代码:

  1. import React, { Component } from 'react';
  2. import { View, Text, Platform } from 'react-native';
  3. class PlatformAPI extends Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = { os: '', version: '' };
  7. }
  8. componentDidMount() {
  9. const os = Platform.OS; // android or ios
  10. const version = Platform.Version; // 版本
  11. this.setState({os, version});
  12. }
  13. render() {
  14. // 后缀扩展名
  15. const CompFromExpansionName = require('./Comp').default;
  16. // Platform.select函数
  17. const CompFromPlatfromSelect = Platform.select({
  18. ios: () => require('./CompIOS'),
  19. android: () => require('./CompAndroid')
  20. })().default;
  21. return (
  22. <View>
  23. <Text>os:{this.state.os}</Text>
  24. <Text>version:{this.state.version}</Text>
  25. <Text>自动根据不同的系统装载不同的组件:</Text>
  26. <CompFromExpansionName />
  27. <CompFromPlatfromSelect />
  28. </View>
  29. );
  30. }
  31. }
  32. export default PlatformAPI;

效果:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70

发表评论

表情:
评论列表 (有 0 条评论,655人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Java类

    > 公众号:菜鸡干Java 这部分知识比较深入底层,将重点介绍类加载和反射,会提到JDK动态代理、`AOP`,反射等诸多知识点。当调用Java命令允许程序时,该命令会启动多个

    相关 上拉

    1、如何判断是否已经加载完数据 (1)通过判断页面获取到的数据数量和页面平均获取到的数据判断,比如每个页面返回10条,最后一个页面不到10条 (2)在知道总