我正在尝试为react-native picker添加一些样式，例如下划线和设置占位符，但无法做到。
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>
textDecorationLine 无法将下划线样式设置为选择器。基本上，我想创建像这样的东西，
在这里，我也可以设置占位符的颜色。
谢谢。
在Android系统中，Picker和Picker item的样式是原生处理的。你需要在android/app/src/res/styles.xml中定义Android SpinnerItem的样式，参见：如何为标准react-native android picker设置样式？
我尝试测试下划线，但似乎没有找到可行的解决方法。以下是一些变通方法：Appcompat下的Android Spinner with underline
然而，我会简单地利用React Native组件的优势。我会创建一个新的组件，将React Native的Picker包装起来，并将Picker放置在带有下划线样式的View中，如果Picker的值未定义，则呈现占位符。
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>
);
}
}
您需要按照以下方式修改活动主题：
<!-- 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>
colorAccent 控制下划线的颜色，使用 @style/Base.Widget.AppCompat.Spinner.Underline 可在您的 Picker 上提供下划线。android:editTextStyle，android:textViewStyle 等。Spinner 而不是 AppCompatSpinner，因此如果您运行的是 API < 21，则样式会有所不同。Picker具有TextInput的属性和样式，但实际上并不是这样。这里有一个相关的问题：如何为React Native Picker添加占位符，其中一条评论概述了您需要渲染类似占位文本的内容。textDecorationLine的效果，您可以将borderBottomWidth样式应用于组件。selectedValue和onValueChange属性：selectedValue={this.state.country} onValueChange={(country) => this.setState({country: country})}>
borderBottomWidth属性，参见此链接：https://dev59.com/dFoV5IYBdhLWcg3wRtLa - Mohit Pandey这是我在iOS上能找到的最接近的代码： https://snack.expo.io/r1L7DGb1Z
需要注意以下几点：
1）有一个 itemStyle 属性可以设置单个选择器项目的特定样式
2）为了获得向下箭头，您必须手动模拟它。您可能想要使用 TouchableHighlight 将其功能附加到其中（在示例中未完成）
3）这在Android中看起来不太相似，因此您可能需要附加其他平台特定的样式。
这段代码在我的电脑上运行正常：
<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>
<item name="android:textSize">30sp</item>是重要的部分。但要注意，它似乎并不适用于所有版本（我没有确认或否认它适用于哪些版本，我假设它可能适用于> 4）。 - Travis Whitereact-native无法找到解决方案，但是你分享了一些有用的链接，我至少可以自定义选择器UI，感谢你的分享，因此接受了你的答案。 - Mohit Pandey