如何使用android styles.xml设置react-native picker的样式? [英] How to style the react-native picker using android styles.xml?

问题描述

我想知道如何设置fontFamily.如何设置颜色Picker.items上的背景颜色?

I wanted to know how to set the fontFamily. How to set the color & background color on the Picker.items?

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

我将其发布在Github上，得到的答案是，只有一些可以通过样式在React Native中设置属性，但是选择器的一些其他核心元素(如所使用的字体)是由Android本机驱动的.需要通过使用styles.xml等通过本机android完成.

I posted this on Github and got the answer that only some of the attributes can be set in React Native via the style but some of the more core elements of the picker (like the font used) is driven by native Android. It needs to be done via native android using styles.xml etc.

不幸的是，我不是一名本地android开发人员，因此我在理解解决方案时遇到了麻烦.我在/res/values/styles.xml中添加了以下代码段，但弹出窗口的文本颜色或背景没有变化.

Unfortunately I am not a native android developer so I have trouble understanding the solution. I added the following snippet to /res/values/styles.xml but text color or background of the popup didn't change.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="SpinnerItem">
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">#993399</item>
    </style>
    <style name="SpinnerDropDownItem">
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">#993399</item>
    </style>
</resources>

我还需要进行哪些其他更改?如何设置fontFamily?

What other changes do I need to make? How to set the fontFamily?

推荐答案

这是因为您需要在AppTheme中声明样式

That's because you need to declare the styles inside your AppTheme

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>
    <style name="SpinnerItem">
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">#993399</item>
    </style>
    <style name="SpinnerDropDownItem">
        <item name="android:textColor">#ffffff</item>
        <item name="android:background">#993399</item>
    </style>
</resources>

就这样:)

这篇关于如何使用android styles.xml设置react-native picker的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！