如何设置标准react-native android picker的样式？

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进行样式设置。请参阅this和this。

将以下代码添加到/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

如果您查看- (NSArray *)fibonacciWithLength:(NSInteger)length { NSMutableArray *result = [@[] mutableCopy]; for (NSInteger i=0; i<length; i++) { [result addObject:[self nextFibInArray:result]]; } return result; } 道具，那就是Picker的样式，而不是Picker项目。

您还可以从文档中看到Picker有style道具，但它只是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>