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

Abh*_*lin 53 android react-native

我无法设计它.几乎没有任何关于此的文件.我想知道如何设置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>
Run Code Online (Sandbox Code Playgroud)

Abh*_*lin 53

它可以通过原生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>
Run Code Online (Sandbox Code Playgroud)

在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>
Run Code Online (Sandbox Code Playgroud)

造型前:

在此输入图像描述

造型后:在此输入图像描述

  • 我能够将字体系列更改为"sans-serif-light",但我有一个用于Titillium字体的TTF文件,我该如何设置它? (4认同)
  • 如何去掉矩形顶部和底部的白色背景? (3认同)

Arn*_*ret 8

问题可能是旧的,但万一,您可以使用它来设置颜色样式: <Item label="blue" color="blue" value="blue" />

  • 怎么样背景? (4认同)

Mik*_*nen 5

如果你看一下style道具,它是 Picker 的样式,而不是 Picker 项目。

您还可以从文档中看到 Picker 有itemStyle道具,但它仅适用于 iOS。设置 Android Picker 项目的样式只能通过原生 Android 来完成。