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>

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

基本上，我希望创建这样的东西，

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

先谢谢。

Answer 1

Picker和Picker项目的样式在Android上原生处理。您需要在android/app/src/res/styles.xml中为Android的SpinnerItem定义样式，请参阅：How to style the standard react-native android picker?

我试图测试下划线但似乎找不到任何有用的东西。以下是几个解决方法Android spinner with underline appcompat

但是，我只是将react native的组件用于我们的优势。我创建了一个包含React Native的Picker的新组件，并将选择器放在View中，如果Picker的值未定义，则使用下划线样式呈现占位符。

Answer 2

您需要按如下方式修改活动主题：

<!-- 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的下划线。

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

不幸的是，因为React Picker扩展了Spinner而不是AppCompatSpinner，如果你在API＆lt;＆lt; 1＆gt;上运行，样式会有所不同。 21。

Answer 3

这里的问题是假设Picker具有TextInput的属性和样式，但它没有。这里有一个相关的问题：Have a placeholder for react native picker其中的评论概述了您需要渲染类似于占位符文字的内容。

为了实现类似于textDecorationLine的内容，您可以将borderBottomWidth样式应用于组件。

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

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

Answer 4

这是我在iOS上最接近的地方：https://snack.expo.io/r1L7DGb1Z

很少有事情需要注意：

1）有itemStyle属性可用于设置单个选择器项目的特定样式

2）为了向下箭头，你必须手动模仿它。您可能希望使用 TouchableHighlight 附加它的功能（在示例中没有这样做）

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

Answer 5

这段代码正在我的机器上运行：

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

React Native Picker样式 - ANDROID

5 个答案: