Отредактируйте цвет подчеркивания в раскрывающемся списке реагировать на материал на iOS без изменения цвета стрелки и надписи - PullRequest
0 голосов
/ 17 октября 2019

Я использую реагирующий нативный материал для формы, где я также использую RN TextInput, поэтому я хочу, чтобы между ними было одинаковое представление.

Для Android я использую underlineColorAndroid={'transparent'}, и это прекрасно работает. Проблема в iOS, если я изменяю свойство baseColor, оно автоматически меняет стрелку выпадающего списка, подчеркивание и метку. Как можно установить цвет надписи и подчеркивания отдельно ?

    import { Dropdown } from 'react-native-material-dropdown'
    //...

    <Dropdown
       underlineColorAndroid="transparent"
       label={'BILLING TYPE'}
       labelFontSize={12}
       labelTextStyle={styles.dropdownLabel}
       itemTextStyle={styles.dropdownItem}
       style={styles.dropdownMainText}                         
       style = {{color: Colors.black}}
       baseColor={Colors.black}
       value={'Paper'}
       data={billingTypes}
       onChangeText={value => this.onEditField(value)}
    />

Если я установлю baseColor = {Colors.black} (что я хочу), подчеркивание становится черным, а не серым(чего я не хочу).

screenshot with baseColor={Colors.black}

Если я установлю baseColor = {Colors.rose}, все 3 элемента изменят цвета: метка, стрелкаи подчеркивание.

screenshot with baseColor={Colors.rose}

Здесь находится мой файл styles.js, в котором ничего особенного не происходит

export default StyleSheet.create({
//...
  dropdownLabel: {
    textTransform: 'uppercase',
    color: Colors.black,
  },
  dropdownItem: {
    fontSize: Fonts.size.tiny,
    color: Colors.black,
  },
  dropdownMainText: {
  },
});

const colors = {
  black: '#252525',
  rose: '#e6968f', 
};

Ответы [ 2 ]

1 голос
/ 17 октября 2019

Цвет, который вы хотели бы изменить в раскрывающемся объекте, в данный момент работает в функции. Вы не можете установить его отдельно, потому что вы не указываете отдельный цвет для подчеркивания.

/ dropdown / index.js

renderRipple() {
    let {
      baseColor,
      rippleColor = baseColor,
      rippleOpacity,
      rippleDuration,
      rippleCentered,
      rippleSequential,
    } = this.props;

    let { bottom, ...insets } = this.rippleInsets();
    let style = {
      ...insets,

      height: this.itemSize() - bottom,
      position: 'absolute',
    };

    return (
      <Ripple
        style={style}
        rippleColor={rippleColor}
        rippleDuration={rippleDuration}
        rippleOpacity={rippleOpacity}
        rippleCentered={rippleCentered}
        rippleSequential={rippleSequential}
        ref={this.updateRippleRef}
      />
    );
  }
0 голосов
/ 18 октября 2019

Я нашел это! Как объяснено здесь: https://github.com/n4kz/react-native-material-dropdown/issues/23

<Dropdown
   //
   inputContainerStyle={{ borderBottomColor: Colors.midGrey, borderBottomWidth: 1 }}
/>

с const colors = {midGrey: 'rgba(214, 219, 224, 1)'};

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...