안드로이드와 iOS 환경에 따라서 다른 컴포넌트를 불러오는 방법

리액트 네이티브를 이용하면 안드로이드와 iOS 앱을 동시에 만들 수 있다.

리액트 네이티브가 알아서 각 환경에 맞춰 빌드해주기 때문이다.

그러나 안드로이드에서만 적용되거나 iOS에서만 적용되는 경우도 있어서

각 환경에 따른 분기를 종종 해줘야 한다.

 

예를 들어 Courier라는 폰트는 iOS에서만 쓸 수 있고

Roboto라는 폰트는 안드로이드에서만 쓸 수 있다.

 

이런 경우 분기를 해주려면 Text 컴포넌트의 스타일에 Platform.OS를 이용해서

환경에 따라 다른 fontFamily를 적용할 수도 있지만

사용자 Text 컴포넌트를 따로 만드는 게 깔끔할 것 같다.

 

// AppText.ios.js

 

import React from 'react';

import { StyleSheet, Text } from 'react-native'; 

 

export default function AppText({ children }) { // AppText 안에 들어오는 내용을 props.children으로 받는다.

    return <Text style={styles.text}>{children}</Text>

}

 

const styles = StyleSheet.create({

    text: {

        fontFamily: 'Courier'

    },

});

 

// AppText.android.js

 

/* ... */

        // 위에서 fontFamily만 바꾼다.

        fontFamily: 'Roboto'

/* ... */

 

이제 다음과 같이 AppText를 가져오면

환경에 따라서 자동으로 AppText.ios.js나 AppText.android.js를 불러온다.

 

import AppText from './AppText';

 

function App() {

    return <AppText>안녕하세요</AppText>

}

 

이밖에도 Platform.select를 이용하는 방법도 있다.

간편히 쓸 수 있지만 코드가 지저분해진다는 단점이 있다.

https://reactnative.dev/docs/platform-specific-code