[React Native] Platform

1. Platform

지원하는 버전 확인과  Platform 별 스타일 및 출력 텍스트를 다르게 하는 방법은 다음과 같다.

import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import Supertext from './src/utils/supertext'

class App extends Component {

  checkSupport = () => {
    if(Platform.OS === 'ios') {
      if(Platform.Version < 13.4) {
        return false;
      }
    } else {
      if(Platform.Version < 27) {
        return false;
      }
    }
    return true;
  }

  render() {
    console.warn(Platform.Version)
    return (
      <View style={styles.container}>

        {
          this.checkSupport() ?

          <Supertext
            style={styles.div}
          >
            {
              Platform.OS === 'ios' ?
                'This is iOS'
                :
                'This is Android'
            }
          </Supertext>

          :
          
          <Text>
            Sorry. Your phone is not being supported by the app.
          </Text>
        }

      </View>
    )
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#BBB',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 50
  },
  div: {
    ...Platform.select({
      ios: {
        backgroundColor: 'yellow'
      },
      android: {
        backgroundColor: 'red'
      }
    })
  }
});

export default App;