React native React本机选择器样式-ANDROID

我试图添加一些样式来响应本机选择器，比如底层和设置占位符，但无法这样做

const styles = StyleSheet.create({
  picker: {
    textDecorationLine: 'underline'
  }
});

<Picker
   style={[styles.picker]}>
   <Picker.Item label="Country" value="" />
   <Picker.Item label="United States" value="US" />
   <Picker.Item label="India" value="IN" />
</Picker>

const styles=StyleSheet.create({
选择器：{
textDecorationLine:“下划线”
}
});

如果我使用value=“”，那么它将国家显示为一个可选值，我不想要这个值

textDecorationLine

无法将下划线样式设置为picker

基本上，我想创造这样的东西

其中，我还可以设置占位符的颜色

---

感谢adv.

这里的问题是假设

Picker

具有TextInput的属性和样式，而它没有。这里有一个相关的问题：注释在哪里概述了呈现类似占位符文本的内容

为了实现类似于

textDecorationLine

的功能，可以对组件应用

borderBottomWidth

样式

另外，请记住绑定selectedValue和onValueChange道具：

selectedValue={this.state.country} onValueChange={(country) => this.setState({country: country})}>

---

这是我在iOS上能得到的最接近的结果：

需要注意的几件事：

1） 有

itemStyle

属性用于设置单个选择器项的特定样式

2） 为了获得向下箭头，您必须手动模拟它。您可能希望将其功能附加到TouchableHighlight（本例中未执行此操作）

---

3） 这在Android中看起来并不相似，因此您可能需要附加额外的、特定于平台的样式。

Picker和Picker项的样式在Android上本机处理。您需要在

Android/app/src/res/styles.xml

中定义Android SpinnerItem的样式，请参见：

我试图测试下划线，但似乎找不到任何有效的东西。这里有两个变通方法

---

然而，我会简单地使用react-native的组件来实现我们的优势。我将创建一个新组件，包装React Native的选取器，并将选取器放在一个具有下划线样式的视图中，如果选取器的值未定义，则该视图将呈现占位符。

您需要修改活动主题，如下所示：

<!-- Base application theme. -->
<style name="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:spinnerStyle">@style/Base.Widget.AppCompat.Spinner.Underlined</item>
    ...
</style>

@颜色/颜色重音
@style/Base.Widget.AppCompat.Spinner.com
...

colorAccent

控制下划线的颜色，并使用

@style/Base.Widget.AppCompat.Spinner.underline

在

选择器上提供下划线

您可以使用此技术在React中的几乎任何android组件上设置样式
android:editTextStyle
，
android:textViewStyle
等

不幸的是，由于React选择器扩展了
微调器
，而不是
AppCompatSpinner
，因此如果您在API<21上运行，则样式会有点不同。
这段代码在我的机器上运行：

           <View style={{borderBottomWidth:1, borderColor: 'rgb(204, 204, 
              204)',width: "28%"}}>
                    <Picker
                selectedValue={this.state.pickerValue}
                style={[styles.textInputBox]}
                onValueChange={this.onChange}>
                <Picker.Item label="+31" value="+31" />
                <Picker.Item label="+41" value="+41" />
                <Picker.Item label="+51" value="+51" />
                <Picker.Item label="+61" value="+61" />
                </Picker>
               </View>

您还可以使用此选项使您的本地选取器更具吸引力。您可以向视图中添加样式，以便它可以轻松地对选取器进行更改

import React, { Component } from 'react';
import { View, Picker } from 'react-native';
export default class DropdownDemo extends Component{
    state = { user: '' }
    updateUser = (user) => {
        this.setState({ user: user })
    }
    render(){
        return(
            <View
                    style={{
                        width: 300,
                        marginTop: 15,
                        marginLeft:20,
                        marginRight:20,
                        borderColor: 'black',
                        borderBottomWidth:1,
                        borderRadius: 10,
                        alignSelf: 'center'
                    }}>
                    <Picker
                        selectedValue={this.state.user}
                        onValueChange={this.updateUser}


                    >
                        <Picker.Item label="Male" value="Male" />
                        <Picker.Item label="Female" value="Female" />
                        <Picker.Item label="Other" value="Other" />
                    </Picker>
                </View>
        );
    }
}

import React，{Component}来自'React'；
从“react native”导入{View，Picker}；
导出默认类DropdownDemo扩展组件{
状态={用户：'}
updateUser=（用户）=>{
this.setState（{user:user}）
}
render（）{
返回(
);
}
}
React native也不支持
borderBottomWidth
属性，请看，还有什么方法可以减少“Picker”的字体大小，因为根据React文档，Picker支持
样式
，但不知怎的，它不起作用。谢谢分享，但我忘了提到目前我正在寻找Android的解决方案，因此更新了我的问题。是的，这是一个我可以实现的解决方案。而且，
picker
似乎不支持样式设置，我无法更改它的字体大小。有什么建议吗？关于在xml中定义字体大小，请在这里查看第二个答案：
30sp
是重要的一点。不过要注意，它似乎并不适用于所有版本（我没有确认或否认它适用于哪些版本，我认为它可能适用于>4）。我认为使用
react native
解决方案不可用，但您共享了一些有用的链接，我至少可以使用这些链接自定义选择器UI，感谢分享并接受您的答案。