更改默认的 React Native <Picker> 下拉箭头图标

Question

我想具体改变它的颜色：

<Picker selectedValue={this.state.selected}
        onValueChange={(value) => this.setState({selected:value})}  >
  {data.map ((value)=><Picker.Item label={value} value={value} key={value}/>)}
</Picker>

Answer 1

无法使用 React Native 更改 iOS 本机组件，超出记录为可配置的内容。 Apple 对其原生元素的使用非常有意见，这些元素为 iOS 用户提供了熟悉且一致的体验。

我之前曾尝试更改或删除所选项目周围的线条，但均未成功。仅使用 React Native 和 JavaScript 是不可能的。如果您想编写 Objective-C 或 Swift 那么它可能能够扩展本机组件并为自己创建一个 POD 集成，它可以向 React 组件公开一个可配置的 API。

对我来说这是太多的工作，我最终从头开始编写自己的 js 实现。

Answer 2

试试这个...

<Picker
  mode="dropdown"
  style={{backgroundColor: 'red'}}
  selectedValue={this.state.selected}
  onValueChange={(value) => this.setState({selected: lang})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Answer 3

一种可能的解决方案是用一个绝对定位的矢量图标覆盖现有的箭头，该矢量图标包裹在一个视图中，该视图的背景颜色与 Picker 容器的其余部分相匹配。这通常很有效，因为选择器箭头默认情况下不会根据 Picker.Item 值的长度重新定位。

Answer 4

使用带有叠加图标的 RNVectorIcon 预览 RNPicker android

import React from 'react';
import { Picker, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class _class extends React.Component {
  static Item = Picker.Item;

  render() {
    const autoWidth = 70 + ((this.props.selectedValue.length - 2) * 8);

    return (
      <View style={[
        { backgroundColor: '#ffffff20', padding: 8, paddingRight: 0, opacity: this.props.enabled ? 1 : .5 },
        this.props.viewstyle, this.props.and_viewstyle
      ]}>
        <Picker {...this.props} style={[{ width: autoWidth, height: 20 }, this.props.style, this.props.and_style]}>
          {this.props.children}
        </Picker>
        <Icon
          name='sort-down'
          size={20}
          color='white'
          style={[{right: 18, top: 4, position: 'absolute'}]}
        />
      </View>
    );
  }
}

android/app/src/main/res/values/styles.xml:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    </style>

    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:textSize">15dp</item>
    </style>
</resources>

Answer 5

对于希望更改 android 中插入符号图标（下拉箭头）颜色的用户，您可以尝试将以下行添加到 styles.xml：

<item name="android:colorControlNormal">#FFFFFF</item>

应该是这样的：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorControlNormal">#FFFFFF</item>
    </style>
</resources>

完成后，重建应用程序，因为对本机文件所做的更改不会热重新加载。

Answer 6

我找到了一个解决方案，虽然它不是一个简单的解决方案。首先，我为选择器添加了背景色以禁用默认下拉菜单，然后我添加了一个下拉图标并定位它。它非常适合我。这是代码示例。

    <View style={Style.pickerWrapper}>
      <Icon
        name="arrow-drop-down"
        type="MaterialIcons"
        style={Style.pickerIcon}
      />
      <Picker
        mode="dropdown"
        style={fieldtypeStyle.pickerContent}
        placeholder="Select your SIM"
        placeholderStyle={{ color: #E2E2E2 }}
        placeholderIconColor={#E2E2E2}
        selectedValue={this.state.selected2}
        onValueChange={this.onValueChange2.bind(this)}
      >
        <Picker.Item label="Wallet" value="key0" />
        <Picker.Item label="ATM Card" value="key1" />
        <Picker.Item label="Debit Card" value="key2" />
        <Picker.Item label="Credit Card" value="key3" />
      </Picker>
    </View>

这是我使用的样式

 pickerWrapper: {
    borderColor: blurColor,
    borderWidth: 1,
    backgroundColor: "#273137",
    borderRadius: 4
 },
 pickerIcon: {
    color: inputColor,
    position: "absolute",
    bottom: 15,
    right: 10,
    fontSize: 20
 },

 pickerContent: {
    color: inputColor,
    backgroundColor: "transparent",
 },

Answer 7

您可以更改 android 中的下拉箭头图标，如下所示：

<Picker dropdownIconColor= 'colorName'/>

Answer 8

我确实用这个解决了问题：

转到节点模块文件 -> react-native-material-dropdown（无论你使用什么库）

然后用你想要的图标来改变你的图标。

PS: You can't change color of the arrow icon because it's an image not a component

享受编码:)

Answer 9

我的解决方法是通过将其显示属性设置为 none 并将其不透明度设置为 0 并通过引用实际的视图制作另一个视图来使选择器消失选择器；

这里是一个年份选择器的例子。

import { View, Text, TouchableOpacity } from 'react-native';
import React, { useState, useRef } from 'react';
import { Picker } from '@react-native-picker/picker';

const renderYears = () =>
  [
    ...Array.from(
      { length: new Date().getFullYear() - 1900 },
      (value, index) => 1900 + index,
    ),
  ]
    .reverse()
    .map(n => <Picker.Item key={n + ''} label={n + ''} value={n + ''} />);

const YearPicker = () => {
  const ref = useRef();
  const [selectedYear, setSelectedYear] = useState();

  const handleOpenPicker = () => {
    ref.current.focus();
  };

  const handleClosePicker = () => {
    ref.current.blur();
  }

  return (
    <>
      <TouchableOpacity
        onPress={handleOpenPicker}
        style={{
          backgroundColor: 'pink',
          height: 48,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Select Year</Text>
        <Picker
          style={{ display: 'none', opacity: 0, height: 0, width: 0 }}
          ref={ref}
          selectedValue={selectedYear}
          onValueChange={(v, i) => setSelectedYear(v)}>
          {renderYears()}
        </Picker>
      </TouchableOpacity>
      <Text>{selectedYear}</Text>
    </>
  );
};

export default YearPicker;

Answer 10

试试这个..只需在选择器中添加您自己的图标，然后隐藏或更改选择器默认图标的颜色..就像这样：

<Picker
dropdownIconRippleColor={'#FFFFFF'}
dropdownIconColor={'#ffffff'}
pickMultiple={true}
enabled={true}
mode='dropdown'
onValueChange={(itemValue, itemIndex) =>                                                                   
setPtype(itemValue)}
selectedValue={Ptype}

>
                                                                
<Picker.Item color="#707070" label="Digital" value="Digital" key="1" />
<Picker.Item color="#707070" label="Digital1" value="Digital1" key="2" />
 <Picker.Item color="#707070" label="Digital2" value="Digital2" key="3" />

</Picker>
<AntDesign name="up" size={16} style={{marginTop:'-8%',marginRight:'-78%'}}/>

更改默认的 React Native <Picker> 下拉箭头图标

Change the default React Native <Picker> drop-down arrow icon

picker

react-native

react-native-android