Xamarin 说明

Xamarin 说明：：

这一方法可以接受任何合法类型的参数，因此你也可以直接用它针对不同平台返回不同的组件，像下面这样：

导入的组件需要访问default属性，不然得到是一个对象！！ -- 组件写法不变内部也是使用export default作为导出

const PlatformComp = Platform.select({
  ios: () => require('../../components/plantform.ios'),
  android: () => require('../../components/plantform.android')
})().default

然后就能正常使用组件了，PlatformComp

更建议使用特定平台扩展名，建立两个文件

React Native 会根据运行平台的不同自动引入正确对应的组件。

// 特定平台扩展名  --  组件首字母必须大写！！

import CompPlatform from '../../components/plantform'

然后就能正常使用组件了，CompPlatform

特定平台代码 - 章节学习

import React, { Component } from 'react'
import { View, Image, Platform, StyleSheet, Text } from 'react-native'

// 区分平台内容
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu'
})

// 这一方法可以接受任何合法类型的参数，因此你也可以直接用它针对不同平台返回不同的组件  -- 组件首字母必须大写！！
// 官方文档的坑：：导入的组件需要访问default属性，不然得到是一个对象！！ --  组件写法不变内部也是使用export default作为导出
const PlatformComp = Platform.select({
  ios: () => require('../../components/plantform.ios'),
  android: () => require('../../components/plantform.android')
})().default

// 特定平台扩展名
import CompPlatform from '../../components/plantform'

export default class FlexDimensionsBasics extends Component {
  render() {
    // 通Image组件android不支持jpg格式图片
    let pic = {
      uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'
    }
    console.log(Platform)

    return (
      <View style={styles.container}>
        <Image source={pic} style={styles.icon} />
        <View style={styles.info}>
          <Text style={{ color: 'white', marginBottom: 10 }}>
            区分样式和文本
          </Text>
          <Text style={{ color: 'white' }}>{instructions}</Text>
        </View>
        <View style={styles.info}>
          <Text style={{ color: 'white' }}>BUG：不同平台返回不同的组件</Text>
          <PlatformComp />
        </View>
        <View style={{ marginTop: 10 }}>
          <Text>
            检测系统版本：{Platform.OS} - {Platform.Version}
          </Text>
        </View>
        <View style={styles.info}>
          <Text style={{ color: 'white' }}>特定平台扩展名</Text>
          <CompPlatform />
        </View>
      </View>
    )
  }
}

// 区分平台样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  icon: {
    width: Platform.OS === 'ios' ? 100 : 50,
    height: Platform.OS === 'ios' ? 100 : 50
  },
  // Jsx语法 - less/scss方案  1. Text的borderRadius属性无效  2. StyleSheet不支持嵌套写法，很恶心 — less/scss方案
  info: {
    marginTop: 20,
    padding: 20,
    borderRadius: 10,
    ...Platform.select({
      ios: {
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'blue'
      }
    })
  }
})