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

Posted 2023-02-25

【中文标题】更改默认的 React Native <Picker> 下拉箭头图标

【英文标题】：Change the default React Native <Picker> drop-down arrow icon

【发布时间】：2017-10-20 10:09:57

【问题描述】：

我想专门改变它的颜色：

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

【问题讨论】：

我没有给你确切的答案，但我知道它必须在 android 方面以 xml 样式进行修改。

【参考方案1】：

对于那些希望在 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>

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

【参考方案2】：

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

【讨论】：

这很好用。使用 Expo 时的一个很好的解决方案，您无法在不分离的情况下修改 styles.xml

您可能还需要通过设置属性pointerEvents="none"来设置将成为/包含绝对定位项的视图的点击属性。

【参考方案3】：

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

<Picker dropdownIconColor= 'colorName'/>

【讨论】：

太棒了！这应该是有效的答案。

【参考方案4】：

使用 React Native 更改 ios 原生组件是不可能的，超出了记录为可配置的内容。 Apple 对原生元素的使用非常有主见，这为 iOS 用户提供了熟悉且一致的体验。

我之前曾尝试更改或删除所选项目周围的线条，但未成功。仅使用 React Native 和 javascript 是不可能的。如果你想编写 Objective-C 或 Swift，那么它可以扩展原生组件并为自己创建一个 POD 集成，它可以将可配置的 API 暴露给 React 组件。

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

【参考方案5】：

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

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

【讨论】：

这是 default React-Native <Picker> OP 询问的吗？根据文档，它不支持 placeholder 道具？

我没有在 ios 中测试过它，但我想它会在那里工作。您可以在 ios 中测试它，让我知道，谢谢。

【参考方案6】：

使用带有覆盖图标的 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>

【参考方案7】：

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

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

然后将您的图标更改为您想要的。

PS：您不能更改箭头图标的颜色，因为它不是图像 一个组件

享受编码:)

【参考方案8】：

我做了一个解决方法是通过将其显示属性设置为 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;

【参考方案9】：

试试这个...

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

github.com/danielweinmann/react-native-picker-dropdown/blob/…....试试这个参考....谢谢

我已经尝试过了，它改变了我的选择器背景而不是下拉图标颜色它仍然是黑色

这段代码根本没有回答这个问题。 OP 要求更改 Picker 的 下拉箭头图标 颜色。