如何设置标准React-Native Android Picker的样式?

问题描述

我无法设置样式.几乎没有任何文档.我想知道如何设置fontFamily.如何在Picker.items上设置背景颜色?

I am unable to style it. There is hardly any documentation on this. I want to know how to set the fontFamily. How to set the background color on the Picker.items?

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

设置fontFamily或背景颜色无效.将其包装在View中并为View提供样式属性也不起作用.

Setting fontFamily or background color doesn't work. wrapping it up in a View and giving style attributes to View also doesn't work.

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

推荐答案

可以通过本机android设置样式.参见此和.

It can be styled via native android. See this and 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创建文件并添加以下代码

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>

样式之前:

样式设置后:

这篇关于如何设置标准React-Native Android Picker的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！