如何设置标准 react-native android 选择器的样式？

Posted 2023-02-16

【中文标题】如何设置标准 react-native android 选择器的样式？

【英文标题】：How to style the standard react-native android picker?

【发布时间】：2016-12-19 16:13:37

【问题描述】：

我无法设置它的样式。几乎没有这方面的任何文档。我想知道如何设置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>

【参考方案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: />
</shape>

造型前：

造型后：

【讨论】：

如何去掉矩形顶部和底部的白色背景？

我试过了，但做不到，所以我就让它保持原样。看起来还不错:)

我让它工作了，谢谢！有没有办法有多种样式可供选择？假设我希望我的应用程序中的一个选择器中的字体大小更大，但其他的都是一样的。有没有办法在 javascript 代码中设置某种属性，我可以用来从原生 android xml 切换它使用的样式？

我可以将字体系列更改为“sans-serif-light”，但我有一个 Titillium 字体的 TTF 文件，我该如何设置？

它可以工作，但是 fontFamily(Montserrat-Regular) 没有应用。你能告诉我如何删除顶部和底部的空白吗？

【参考方案2】：

这个问题可能是老问题，但以防万一，您可以使用它来设置颜色样式： <Item label="blue" color="blue" value="blue" />

【讨论】：

background 呢？

不错的发现！您可以在Item 上修改任何其他样式吗？

我会回答我自己的问题，没有其他问题。你可以在这里看到：facebook.github.io/react-native/docs/picker-item#props

【参考方案3】：

如果您查看 style 属性，它是 Picker 的样式，而不是 Picker 项。

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

【讨论】：

我在 Github 上发布了这个问题，得到的答案是它可以通过原生 android 编程来完成。如果你知道怎么做，你能回答这个question吗？

Picker.Item 的唯一属性是 color，它是选项文本的颜色。

【参考方案4】：

对于那些无法在@Abhishek Nalin 答案中的选择器模式中居中文本的人，请使用 android:textAlignment="center"

【参考方案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>