如何設計標准的 react-native android 選擇器？

Question

我無法設計它。 幾乎沒有任何關於此的文檔。 我想知道如何設置 fontFamily。 如何在 Picker.items 上設置背景顏色？

https://facebook.github.io/react-native/docs/picker.html

設置 fontFamily 或背景顏色不起作用。 將其包裝在 View 中並為 View 提供樣式屬性也不起作用。

<Picker
   style={styles.picker} // cannot set fontFamily here
   selectedValue={this.state.selected2}
   onValueChange={this.onValueChange.bind(this, 'selected2')}
   mode="dropdown">
   <Item label="hello" value="key0" /> // cannot set backgroundColor here
   <Item label="world" value="key1" />
</Picker>

Answer 1

它可以通過原生 android 設置樣式。 看到這個和這個。

將以下代碼添加到/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>

在res/drawable/mydivider.xml創建一個文件並添加以下代碼

<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>

造型前：

造型后：

Answer 2

問題可能很舊，但以防萬一，您可以使用它來設置顏色樣式： <Item label="blue" color="blue" value="blue" />

Answer 3

如果您看一下style道具，它是 Picker 的樣式，而不是 Picker 項目。

您還可以從文檔中看到 Picker 具有itemStyle但它僅適用於 iOS。 設置 Android Picker 項目的樣式只能通過原生 Android 來完成。

Answer 4

對於那些無法在@Abhishek Nalin 的選擇器模式中居中文本的人，請使用 android:textAlignment="center"

Answer 5

感謝您分享解決方案。 我在 RTL 布局上對齊選擇器項（spinnerDropDown）中的文本時遇到了類似的問題。 我不想以我的風格對左/右方向進行硬編碼。 這是我使用的解決方法。

在您的 res/values/styles.xml 文件中添加

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 
        ... existing styles
        --->
        <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:textAlignment">gravity</item>
    <item name="android:gravity">start</item>
</style>
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textAlignment">gravity</item>
    <item name="android:gravity">start</item>
    <item name="android:padding">10dp</item>
</style>