React Native Picker 样式 - ANDROID

Question

我正在尝试为 react-native 选择器添加一些样式，例如底层和设置占位符，但无法这样做。

 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>

1. 如果我使用 value=““，那么它将国家显示为可选值，这是我不想要的。
2. textDecorationLine 无法将下划线样式设置为选择器。

基本上，我正在寻找创造这样的东西，

在哪里，我也可以设置占位符的颜色。

谢谢你的建议。

原文由 Mohit Pandey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Picker 和 Picker 项目的样式在 Android 上本地处理。您需要在 android/app/src/res/styles.xml 中为 Android 的 SpinnerItem 定义样式，请参阅： 如何设置标准 react-native android 选择器的样式？

我试图测试下划线，但似乎找不到任何有效的方法。这是 带有下划线appcompat的Android微调器 的几种解决方法

但是，我会简单地使用 react native 的组件来发挥我们的优势。我将创建一个包装 React Native 的 Picker 的新组件，并将选择器放在具有下划线样式的 View 中，如果 Picker 的值未定义，则该样式呈现占位符。

原文由 Travis White 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里的问题是假设 Picker 具有 TextInput 的属性和样式，但它没有。这里有一个相关的问题： 有一个用于反应原生选择器的占位符， 其中注释概述了您需要呈现类似于占位符文本的内容。

为了实现类似 textDecorationLine 您可以对组件应用 borderBottomWidth 样式。

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

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

原文由 jaws 发布，翻译遵循 CC BY-SA 3.0 许可协议