react-native - React Native，为什么我不能在 Android 平台上将选择器项目右对齐？

Question

我尝试了很长时间寻找解决方案，但仍然没有用!以下是我的写法:

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

Answer 1

如果你想在 Android 上更改选择器项的样式，你必须更改 native 代码。

您必须在 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>

希望对您有所帮助!