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

试试这个......

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

除了记录为可配置的内容之外，无法使用React Native更改iOS本机组件。 Apple非常注重其原生元素的使用，这为iOS用户提供了熟悉且一致的体验。

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

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

Answer 3

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

Answer 4

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

您可以像下面这样更改android中的下拉箭头图标：

// btData is bars data you get from your data feed // use from and to parameters to fetch only requested data // so after one point in time, datafeed will not have any data so at that time, set noData: true like this if(btData.length < 1){ onHistoryCallback([], { noData: true }); } else { onHistoryCallback(bars, { noData: false }); }

Answer 6

使用RNVectorIcon和覆盖图标https://i.stack.imgur.com/cJJTl.png预览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 7

我找到了一个解决方案，尽管它不是一个简单的解决方案。首先，我向选择器添加了背景色以禁用默认下拉菜单，然后添加了一个下拉图标并将其定位。它对我来说非常有效。这是代码示例。

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

更改默认的React Native <选取器>下拉箭头图标

7 个答案: