React Native 选择器样式 - 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=""，那么它会将 country 显示为可选值，这是我不想要的。
2. 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 的新组件，并将选择器放在一个带有下划线样式的视图中，如果 Picker 的值未定义，则该样式呈现一个占位符。

Answer 2

您还可以使用这个来使您的 react-native 选择器更具吸引力。您可以将样式添加到您的视图中，以便它可以轻松地更改您的选择器。

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>
        );
    }
}

Answer 3

您需要修改您的活动主题如下：

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

Answer 4

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

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

另外，记得绑定 selectedValue 和 onValueChange 属性：

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

Answer 5

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

注意事项：

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

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

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

Answer 6

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

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