[ReactNative] react-native-picker itemStyle in Android

react-native-picker의 itemStyle 속성은 iOS 에서만 작동된다고 써있다 

따라서 Android 에서는 따로 커스텀 할 수 없는 것으로 알고있었다.

 

하지만 StackOverFlow에서 Android Style.xml 단에서 수정하여 적용시키는 법을 찾았다.

 

stackoverflow.com/questions/38921492/how-to-style-the-standard-react-native-android-picker#comment80255009_39141949

How to style the standard react-native android picker?

본문은 다음과 같다.

It can be styled via native android. See this and this.

 

Add the following code to /res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
</style>

<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:fontFamily">sans-serif-light</item>
    <item name="android:textSize">18dp</item>
</style>

<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:textColor">#ffffff</item>
    <item name="android:textSize">18dp</item>
    <item name="android:fontFamily">sans-serif-light</item>
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/mydivider</item> 
</style>

//SpinnerItem을 수정한다면 Picker를 누르기전에 보여지는 Box를 Styling할 수 있다.

//SpinnerDropDownItem을 수정하면 Picker를 누른 후 보여지를 리스트(?)를 Styling 할 수 있다.

 

Create a file at res/drawable/mydivider.xml and add the following code

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#29A1C9" />
    <corners android:radius="0.5dp" />
    <stroke
        android:color="#FFFFFF"
        android:width="0.1dp" />
</shape>

Before styling:

After styling:

 

Java에 익숙치 않아 디테일 하게 수정 할 수 없었지만 android:gravity 를 통해 성공적으로 Text를 정렬할 수 있었다.