Изменение по умолчанию React Native <picker> значок со стрелкой вниз

Ответ 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.

Ответ 3

Невозможно изменить собственные компоненты iOS, используя React Native, за пределами того, что задокументировано как настраиваемое. Apple очень упрямо относится к использованию своих родных элементов, которые дают пользователям iOS знакомый и последовательный опыт.

Я ранее безуспешно пытался изменить или удалить строки вокруг выбранного элемента. Это невозможно, используя только React Native и JavaScript. Если вы хотите написать Objective-C или Swift, тогда он сможет расширить собственный компонент и создать себе интеграцию POD, которая может предоставить настраиваемый API для компонента React.

Для меня это была слишком большая работа, и я в конечном итоге написал свою собственную реализацию js с нуля.

Ответ 4

Попробуй это...

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

Ответ 5

Предварительный просмотр андроида RNPicker с помощью RNVectorIcon с надписью наложения https://i.stack.imgur.com/cJJTl.png

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/приложение /SRC/основные /RES/значения /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>

Ответ 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",
 },