React Native,为什么我不能在Android平台上将选择器项对齐?

时间:2017-07-22 04:39:00

标签: react-native

我试图找到解决方案多年,但它仍然没有工作!以下是我的写作:

<View style = {[ {flex: 0.7} ]}>
    <Picker
        selectedValue={this.state.selectedGender}
        onValueChange={this.onValueChange.bind(this, 'selectedGender')}
        >
        <Item label="Please select gender" value=""/>  
        <Item label="Male" value="M" /> 
        <Item label="Female" value="F" />
    </Picker>
</View>

1 个答案:

答案 0 :(得分:5)

如果您想在Android上更改选择器项的样式,则必须更改本机代码。

您必须在android/app/src/main/res/values/styles.xml中添加您的风格。

更改选择器容器

我在此处设置了null的背景,因此左侧没有向下箭头。

<style name="SpinnerStyle" parent="@android:style/Widget.Spinner">>
    <item name="android:background">@null</item>
</style>

更改所选的项目样式

这里我将项目设置为居中,颜色字体为深灰色,字体大小为16。

<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
    <item name="android:gravity">center</item>
    <item name="android:textColor">#373737</item>
    <item name="android:textSize">16dp</item>
</style>

更改下拉商品

就像所选项目一样,我希望下拉项目具有相同的样式。

<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
    <item name="android:gravity">center</item>
    <item name="android:textColor">#373737</item>
    <item name="android:textSize">16dp</item>
</style>

<强>最后

有一次,您已为选择器的每个元素设置样式。您必须将样式添加到常规App主题。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:spinnerStyle">@style/SpinnerStyle</item>
    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    ...
</style>

希望它有所帮助!