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>

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

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

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

致谢

Answer 1

这里的问题是假设 Picker 具有 TextInput 的属性和样式，而事实并非如此。这里有一个相关的问题：Have a placeholder for react native picker 其中一条评论概述了呈现类似于占位符文本的内容所需的内容。

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

此外，记得绑定 selectedValue 和 onValueChange 道具：

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

Answer 2

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

注意事项：

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

2) 为了得到向下的箭头，你必须手动模仿它。您可能希望将其功能附加到 TouchableHighlight（示例中未完成）

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

Answer 3

选择器和选择器项的样式在 Android 上本地处理。您需要在 android/app/src/res/styles.xml 中为 Android 的 SpinnerItem 定义样式，请参阅：

我试图测试下划线，但似乎找不到任何有用的东西。这里有几个解决方法

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

Answer 4

您需要修改您的 activity 主题如下：

<!-- 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，如果您运行 on API < 21，样式会有点不同。

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>

Answer 6

您也可以使用这个来使您的 react-native 更具吸引力picker.You 可以向您的视图添加样式，以便它可以轻松地更改您的选择器。

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

React Native 选择器样式 - ANDROID

React Native Picker Styling - ANDROID

react-native

react-native-android