如何设计标准的 react-native android 选择器? [英] How to style the standard react-native android picker?
本文介绍了如何设计标准的 react-native android 选择器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我无法设计它.几乎没有关于此的任何文档.我想知道如何设置 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
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>
解决方案
It can be styled via native android. See this and this.
Add the following code to /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>
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>
Before styling:
After styling:
这篇关于如何设计标准的 react-native android 选择器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文