在 iOS 上编辑 react-native-material-dropdown 中的下划线颜色而不更改箭头和标签颜色

Question

我将 react-native-material-dropdown 用于我也使用 RN TextInput 的表单，因此我希望两者之间的外观一致。

我想要黑色标签header和浅灰色下划线

对于 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}（我想要），下划线变为黑色而不是灰色（我不想要）。

如果我设置 baseColor={Colors.rose}，所有 3 个元素都会改变颜色：标签、箭头和下划线。

这是我的 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', 
};

Answer 1

您想要在 Dropdown 对象中更改的颜色当前在函数中运行。您不能单独设置它，因为您没有为下划线指定单独的颜色。

/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}
      />
    );
  }

Answer 2

我找到了！如此处所述：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)'};

在 iOS 上编辑 react-native-material-dropdown 中的下划线颜色而不更改箭头和标签颜色

Edit underline color in react-native-material-dropdown on iOS without changing arrow and label color

react-native

react-native-ios